@layer tokens, base, components, layout, utilities;

@layer tokens {
  :root {
    /* Brand (exact hex) */
    --da-brand-ioh: #25BDAD;
    --da-brand-im3: #FFCB08;
    --da-brand-3id: #C6168D;
    --da-primary: var(--da-brand-ioh);
    --da-primary-hover: #0d9488;

    /* Slate */
    --da-slate-50:#f8fafc; --da-slate-100:#f1f5f9;
    --da-slate-200:#e2e8f0; --da-slate-300:#cbd5e1;
    --da-slate-400:#94a3b8; --da-slate-500:#64748b;
    --da-slate-600:#475569; --da-slate-700:#334155;
    --da-slate-800:#1e293b; --da-slate-900:#0f172a;

    /* Status */
    --da-success:#10b981; --da-danger:#f43f5e;
    --da-warning:#f59e0b; --da-info:#0ea5e9;

    /* Surface — light */
    --da-bg: var(--da-slate-50);
    --da-surface: #fff;
    --da-surface-muted: var(--da-slate-100);
    --da-border: var(--da-slate-200);
    --da-text: var(--da-slate-900);
    --da-text-muted: var(--da-slate-500);

    /* Status chip bg/text */
    --da-chip-success-bg:#dcfce7; --da-chip-success-fg:#166534;
    --da-chip-danger-bg:#fee2e2;  --da-chip-danger-fg:#991b1b;
    --da-chip-warning-bg:#fef3c7; --da-chip-warning-fg:#92400e;
    --da-chip-info-bg:#e0f2fe;    --da-chip-info-fg:#075985;
    --da-chip-ioh-bg:#f0fdfa;     --da-chip-ioh-fg:#0f766e;
    --da-chip-im3-bg:#fefce8;     --da-chip-im3-fg:#a16207;
    --da-chip-3id-bg:#fdf2f8;     --da-chip-3id-fg:#be185d;

    /* Typography — Poppins (display/headings), Prompt (body/content) */
    --da-font-display:'Poppins',ui-sans-serif,system-ui,sans-serif;
    --da-font-sans:'Prompt',ui-sans-serif,system-ui,sans-serif;
    --da-font-mono:ui-monospace,'SF Mono',Consolas,monospace;
    --da-text-xs:12px; --da-text-sm:13px; --da-text-base:14px;
    --da-text-lg:16px; --da-text-xl:18px; --da-text-2xl:22px;
    --da-text-3xl:28px; --da-text-4xl:36px; --da-text-5xl:48px;

    /* Spacing (4pt grid) */
    --da-space-1:4px;  --da-space-2:8px;  --da-space-3:12px;
    --da-space-4:16px; --da-space-5:20px; --da-space-6:24px;
    --da-space-8:32px; --da-space-10:40px; --da-space-12:48px;

    /* Radius */
    --da-radius-sm:8px; --da-radius:12px; --da-radius-lg:16px;
    --da-radius-pill:999px;

    /* Shadow — tuned for crisp Bento feel */
    --da-shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.06);
    --da-shadow-md: 0 4px 8px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.08);
    --da-shadow-lg: 0 8px 16px rgba(15,23,42,.05), 0 24px 48px rgba(15,23,42,.12);
    --da-shadow-glow: 0 0 0 1px color-mix(in srgb, var(--da-primary) 18%, transparent);

    /* Motion */
    --da-ease:cubic-bezier(.2,.8,.2,1);
    --da-dur-fast:150ms; --da-dur:260ms; --da-dur-slow:400ms;
    --da-stagger:60ms;
  }

  :root[data-theme="dark"] {
    --da-bg:#09090b;
    --da-surface:#18181b;
    --da-surface-muted:#27272a;
    --da-border:#27272a;
    --da-text:#fafafa;
    --da-text-muted:#a1a1aa;

    --da-shadow-sm:0 1px 2px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
    --da-shadow-md:0 6px 16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
    --da-shadow-lg:0 16px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);

    --da-chip-success-bg:rgba(16,185,129,.15); --da-chip-success-fg:#6ee7b7;
    --da-chip-danger-bg:rgba(244,63,94,.15);   --da-chip-danger-fg:#fda4af;
    --da-chip-warning-bg:rgba(245,158,11,.15); --da-chip-warning-fg:#fcd34d;
    --da-chip-info-bg:rgba(14,165,233,.15);    --da-chip-info-fg:#7dd3fc;
    --da-chip-ioh-bg:rgba(37,189,173,.15);     --da-chip-ioh-fg:#5eead4;
    --da-chip-im3-bg:rgba(255,203,8,.15);      --da-chip-im3-fg:#fde68a;
    --da-chip-3id-bg:rgba(198,22,141,.15);     --da-chip-3id-fg:#f9a8d4;
  }

  @media (prefers-reduced-motion: reduce) {
    :root { --da-dur-fast:0ms; --da-dur:0ms; --da-dur-slow:0ms; --da-stagger:0ms; }
  }
}