/* ============================================================================
   FIXXO — Design tokens v3  "Product"
   Benchmarked to the surfaces the user named:
     Google (Material 3)  — white surfaces, #202124 ink, 8pt grid, 12–28px radii
     Apple (HIG)          — #F5F5F7 secondary, #1D1D1F ink, tight display tracking,
                            pill controls, soft elevation, photography-free product UI
     OpenAI               — near-white, near-black, one restrained accent,
                            generous whitespace, no decoration
     Urban Company        — white app, single purple accent, rounded cards
   Result: cool neutral greys (no warm/paper cast), Inter, vivid purple,
   generous radii, soft shadows. No serif. No paper. No gradients.
   ============================================================================ */

:root{
  /* ---- accent: one purple ---------------------------------------------- */
  --p-50:#F5F3FF;  --p-100:#EDE9FE; --p-200:#DDD6FE; --p-300:#C4B5FD;
  --p-400:#A78BFA; --p-500:#8B5CF6; --p-600:#7C3AED; --p-700:#6D28D9;
  --p-800:#5B21B6; --p-900:#4C1D95;

  /* ---- neutrals: true cool grey, never warm, never pure #000 ---------- */
  --n-0:#FFFFFF;
  --n-25:#FCFCFD;
  --n-50:#F7F7F8;
  --n-100:#F1F1F3;
  --n-150:#EAEAEC;
  --n-200:#E3E3E6;
  --n-300:#D1D1D6;
  --n-400:#A1A1AA;
  --n-500:#71717A;
  --n-600:#52525B;
  --n-700:#3F3F46;
  --n-800:#27272A;
  --n-900:#18181B;
  --ink:#0D0D0F;

  /* ---- semantic -------------------------------------------------------- */
  --canvas:var(--n-0);
  --surface:var(--n-50);
  --surface-2:var(--n-100);
  --raised:var(--n-0);
  --text:var(--ink);
  --text-2:var(--n-600);
  --text-3:var(--n-400);
  --line:var(--n-150);
  --line-2:var(--n-200);
  --accent:var(--p-700);
  --accent-hover:var(--p-800);
  --accent-press:var(--p-900);
  --accent-soft:var(--p-50);
  --accent-soft-2:var(--p-100);
  --accent-line:var(--p-200);
  --on-accent:#FFFFFF;
  --focus:var(--p-600);

  --ok:#16A34A;   --ok-bg:#F0FDF4;   --ok-line:#BBF7D0;
  --warn:#D97706; --warn-bg:#FFFBEB; --warn-line:#FDE68A;
  --bad:#DC2626;  --bad-bg:#FEF2F2;  --bad-line:#FECACA;
  --info:#2563EB; --info-bg:#EFF6FF; --info-line:#BFDBFE;

  /* ---- type: one neutral grotesque, like the companies named ---------- */
  --font:'Inter','Inter var',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono','Cascadia Mono',Menlo,monospace;

  --t-11:11px; --t-12:12px; --t-13:13px; --t-14:14px; --t-15:15px; --t-16:16px;
  --t-18:18px; --t-20:20px; --t-24:24px; --t-30:30px; --t-36:36px; --t-48:48px; --t-60:60px;

  --lh-tight:1.1; --lh-snug:1.3; --lh-body:1.55;
  --tr-display:-0.03em; --tr-title:-0.02em; --tr-body:-0.011em; --tr-label:0.01em;

  --w-4:400; --w-5:500; --w-6:600; --w-7:700;

  /* ---- space: 4px base, clean 8pt rhythm ------------------------------ */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px;
  --s-7:32px; --s-8:40px; --s-9:48px; --s-10:64px; --s-11:80px; --s-12:112px;

  /* ---- radius: generous, like Material 3 / HIG ------------------------ */
  --r-1:6px; --r-2:8px; --r-3:10px; --r-4:12px; --r-5:16px; --r-6:20px;
  --r-7:24px; --r-8:32px; --r-pill:999px;

  /* ---- elevation: soft, low-contrast ---------------------------------- */
  --sh-0:0 0 0 1px var(--line);
  --sh-1:0 1px 2px rgba(13,13,15,.04);
  --sh-2:0 1px 3px rgba(13,13,15,.06), 0 4px 12px rgba(13,13,15,.04);
  --sh-3:0 8px 30px rgba(13,13,15,.10), 0 2px 6px rgba(13,13,15,.04);
  --sh-pop:0 16px 48px rgba(13,13,15,.16);

  /* ---- motion ---------------------------------------------------------- */
  --dur-1:120ms; --dur-2:200ms; --dur-3:300ms;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
}

/* dark — a true dark UI like the apps people actually use, not an inversion */
[data-theme="dark"]{
  --canvas:#0B0B0D;
  --surface:#131316;
  --surface-2:#1A1A1E;
  --raised:#151518;
  --text:#F5F5F7;
  --text-2:#A1A1AA;
  --text-3:#71717A;
  --line:#26262B;
  --line-2:#33333A;
  --accent:var(--p-400);
  --accent-hover:var(--p-300);
  --accent-press:var(--p-200);
  --accent-soft:rgba(124,58,237,.16);
  --accent-soft-2:rgba(124,58,237,.24);
  --accent-line:rgba(167,139,250,.32);
  --on-accent:#0D0D0F;
  --focus:var(--p-400);
  --ok:#4ADE80;   --ok-bg:rgba(22,163,74,.14);   --ok-line:rgba(74,222,128,.28);
  --warn:#FBBF24; --warn-bg:rgba(217,119,6,.14); --warn-line:rgba(251,191,36,.28);
  --bad:#F87171;  --bad-bg:rgba(220,38,38,.14);  --bad-line:rgba(248,113,113,.28);
  --info:#60A5FA; --info-bg:rgba(37,99,235,.14); --info-line:rgba(96,165,250,.28);
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 2px 8px rgba(0,0,0,.5);
  --sh-3:0 12px 40px rgba(0,0,0,.6);
  --sh-pop:0 20px 60px rgba(0,0,0,.7);
}