/*
 * tokens.css — Design tokens for Lãi Đơn
 * Color system in OKLCH: neutral ramp + orange accent.
 * Off-black/off-white surfaces, AA+ contrast everywhere.
 */

:root {
  /* ── Neutral ramp ───────────────────────────────────────── */
  --n-0:   oklch(98.5% 0.004 250);   /* near-white surface      */
  --n-50:  oklch(96%   0.006 250);   /* raised surface          */
  --n-100: oklch(92%   0.007 250);   /* subtle border / divider */
  --n-200: oklch(85%   0.009 250);   /* disabled fill           */
  --n-300: oklch(75%   0.010 250);   /* placeholder text        */
  --n-400: oklch(62%   0.012 250);   /* muted text              */
  --n-500: oklch(50%   0.013 250);   /* secondary text          */
  --n-600: oklch(38%   0.012 250);   /* body text (dark surface)*/
  --n-700: oklch(28%   0.011 250);   /* body text               */
  --n-800: oklch(18%   0.010 250);   /* strong text             */
  --n-900: oklch(12%   0.008 250);   /* near-black              */

  /* ── Accent: orange/amber (seller-energy, action) ───────── */
  --a-50:  oklch(97%   0.030  65);
  --a-100: oklch(93%   0.070  65);
  --a-200: oklch(86%   0.120  65);
  --a-300: oklch(78%   0.160  65);
  --a-400: oklch(70%   0.175  65);
  --a-500: oklch(62%   0.180  65);   /* primary CTA             */
  --a-600: oklch(54%   0.175  65);   /* hover                   */
  --a-700: oklch(44%   0.160  65);   /* pressed / focus ring    */
  --a-800: oklch(34%   0.130  65);
  --a-900: oklch(24%   0.090  65);

  /* ── Semantic: success, warning, danger, info ────────────── */
  --s-bg:  oklch(96%   0.040 150);  --s-fg: oklch(32% 0.100 150);
  --w-bg:  oklch(96%   0.055  75);  --w-fg: oklch(38% 0.140  75);
  --d-bg:  oklch(96%   0.040  25);  --d-fg: oklch(36% 0.140  25);
  --i-bg:  oklch(96%   0.030 240);  --i-fg: oklch(36% 0.110 240);

  /* ── Semantic roles (light mode) ────────────────────────── */
  --color-bg:          var(--n-0);
  --color-surface:     var(--n-50);
  --color-border:      var(--n-100);
  --color-border-soft: var(--n-200);
  --color-text:        var(--n-800);
  --color-text-muted:  var(--n-500);
  --color-text-faint:  var(--n-400);
  --color-link:        var(--a-600);
  --color-link-hover:  var(--a-700);
  --color-accent:      var(--a-500);
  --color-accent-hover:var(--a-600);
  --color-focus-ring:  var(--a-700);

  /* ── Typography ──────────────────────────────────────────── */
  --font-sans: 'Inter', 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Scale: 1.250 major-third ratio */
  --text-xs:   0.64rem;   /* 10.24px */
  --text-sm:   0.8rem;    /* 12.80px */
  --text-base: 1rem;      /* 16px    */
  --text-md:   1.25rem;   /* 20px    */
  --text-lg:   1.563rem;  /* 25px    */
  --text-xl:   1.953rem;  /* 31px    */
  --text-2xl:  2.441rem;  /* 39px    */
  --text-3xl:  3.052rem;  /* 49px    */

  /* Line heights */
  --lh-tight:  1.25;
  --lh-snug:   1.375;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  /* ── Spacing (4px base) ──────────────────────────────────── */
  --sp-1:  0.25rem;   /* 4px  */
  --sp-2:  0.5rem;    /* 8px  */
  --sp-3:  0.75rem;   /* 12px */
  --sp-4:  1rem;      /* 16px */
  --sp-5:  1.25rem;   /* 20px */
  --sp-6:  1.5rem;    /* 24px */
  --sp-8:  2rem;      /* 32px */
  --sp-10: 2.5rem;    /* 40px */
  --sp-12: 3rem;      /* 48px */
  --sp-16: 4rem;      /* 64px */
  --sp-20: 5rem;      /* 80px */
  --sp-24: 6rem;      /* 96px */

  /* ── Radii ───────────────────────────────────────────────── */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-full: 9999px;

  /* ── Shadows (border-first, light blur) ──────────────────── */
  --shadow-sm: 0 1px 2px 0 oklch(12% 0.01 250 / 0.08);
  --shadow-md: 0 2px 6px 0 oklch(12% 0.01 250 / 0.10), 0 0 0 1px var(--color-border);
  --shadow-lg: 0 4px 16px 0 oklch(12% 0.01 250 / 0.12), 0 0 0 1px var(--color-border);
  --shadow-float: 0 8px 24px -4px oklch(12% 0.01 250 / 0.18), 0 0 0 1px var(--color-border);

  /* ── Transitions ─────────────────────────────────────────── */
  --easing:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  120ms;
  --dur-base:  200ms;
  --dur-slow:  320ms;

  /* ── Layout ──────────────────────────────────────────────── */
  --container-max:  1200px;
  --container-text: 720px;
  --container-narrow: 640px;
}

/* ── Dark mode ──────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:           oklch(13%  0.008 250);
    --color-surface:      oklch(17%  0.010 250);
    --color-border:       oklch(24%  0.010 250);
    --color-border-soft:  oklch(28%  0.009 250);
    --color-text:         oklch(93%  0.006 250);
    --color-text-muted:   oklch(65%  0.010 250);
    --color-text-faint:   oklch(50%  0.010 250);
    --color-link:         var(--a-300);
    --color-link-hover:   var(--a-200);
    --color-accent:       var(--a-400);
    --color-accent-hover: var(--a-300);
    --color-focus-ring:   var(--a-400);

    --s-bg: oklch(20% 0.040 150); --s-fg: oklch(80% 0.100 150);
    --w-bg: oklch(20% 0.055  75); --w-fg: oklch(85% 0.120  75);
    --d-bg: oklch(20% 0.040  25); --d-fg: oklch(85% 0.120  25);
    --i-bg: oklch(20% 0.030 240); --i-fg: oklch(80% 0.100 240);
  }
}