/* ============================================================
   FlinChop · Design Tokens
   Carbon dark + amber accent. Locked palette.
   ============================================================ */

:root {
  /* --- Color: surfaces ---------------------------------- */
  --bg-base:        #0a0a0a;
  --bg-elevated:    #131313;
  --bg-surface:     #171717;
  --bg-surface-2:   #1f1f1f;
  --bg-overlay:     rgba(10, 10, 10, 0.72);

  /* --- Color: borders ---------------------------------- */
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.18);
  --border-focus:   rgba(245, 158, 11, 0.55);

  /* --- Color: text ------------------------------------- */
  --text-primary:   #fafafa;
  --text-secondary: #d4d4d8;
  --text-muted:     #a1a1aa;
  --text-dim:       #71717a;
  --text-faint:     #52525b;
  --text-onAccent:  #0a0a0a;

  /* --- Color: accent (amber) --------------------------- */
  --accent-50:  #fffbeb;
  --accent-100: #fef3c7;
  --accent-200: #fde68a;
  --accent-300: #fcd34d;
  --accent-400: #fbbf24;
  --accent-500: #f59e0b; /* primary */
  --accent-600: #d97706;
  --accent-700: #b45309;
  --accent-800: #92400e;
  --accent-900: #78350f;

  --accent-glow: rgba(245, 158, 11, 0.18);
  --accent-tint: rgba(245, 158, 11, 0.08);

  /* --- Color: semantic --------------------------------- */
  --color-success: #22c55e;
  --color-warning: #eab308;
  --color-error:   #ef4444;
  --color-info:    #3b82f6;

  /* --- Typography -------------------------------------- */
  --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Geist", "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (fluid, 16px base) */
  --fs-xs:   0.75rem;     /* 12 */
  --fs-sm:   0.875rem;    /* 14 */
  --fs-base: 1rem;        /* 16 */
  --fs-lg:   1.125rem;    /* 18 */
  --fs-xl:   1.25rem;     /* 20 */
  --fs-2xl:  1.5rem;      /* 24 */
  --fs-3xl:  clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);  /* 28-36 */
  --fs-4xl:  clamp(2.125rem, 1.75rem + 1.8vw, 3rem);   /* 34-48 */
  --fs-5xl:  clamp(2.75rem, 2.25rem + 2.5vw, 4rem);    /* 44-64 */
  --fs-6xl:  clamp(3.5rem, 2.75rem + 3.5vw, 5.5rem);   /* 56-88 */

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-relaxed: 1.65;

  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.05em;
  --tracking-mono:   0.02em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* --- Radius (locked system) -------------------------- */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* --- Spacing scale (4px base) ------------------------ */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Layout containers ------------------------------- */
  --container-narrow: 768px;
  --container-base:   1200px;
  --container-wide:   1400px;
  --container-pad:    clamp(1.25rem, 4vw, 2rem);
  --nav-height:       68px;

  /* --- Shadows (tinted, never pure black) -------------- */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-lg:    0 16px 40px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-amber: 0 8px 32px rgba(245, 158, 11, 0.18), 0 2px 8px rgba(245, 158, 11, 0.12);

  /* --- Motion ------------------------------------------ */
  --ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-quick:  cubic-bezier(0.4, 0, 0.2, 1);

  --dur-instant: 100ms;
  --dur-fast:    160ms;
  --dur-base:    220ms;
  --dur-slow:    360ms;
  --dur-slower:  600ms;

  /* --- Z-index scale (documented) ---------------------- */
  --z-base:    1;
  --z-dropdown: 50;
  --z-sticky:  100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   2000;
}