/* ============================================================================
   f(x) → NATURE DS — Design Tokens
   A brutalist, technical design system.
   Aesthetic: brutalist / technical, high-contrast black × cream, acid-lime accent,
   heavy grotesque display type + monospace technical labels, grid + crosshair motifs.

   Theme model: dark is default (near-black). [data-theme="light"] = cream inversion.
   All component CSS must consume ONLY these custom properties (never hard-coded colors).
   ============================================================================ */

:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* --- Brand anchors --------------------------------------------------- */
  --bsf-black: #0a0a0a;
  --bsf-cream: #f3f1ea;
  --bsf-lime: #d4f60a;

  /* --- Surfaces -------------------------------------------------------- */
  --background: #0a0a0a;
  --background-subtle: #0e0e0e;
  --surface: #131313;
  --surface-2: #181818;
  --surface-3: #1f1f1f;
  --overlay: rgba(5, 5, 5, 0.72);

  /* --- Foreground ------------------------------------------------------ */
  --foreground: #f3f1ea;
  --foreground-muted: #a3a299;
  --foreground-subtle: #6e6e66;
  --foreground-faint: #45453f;
  --on-accent: #0a0a0a;

  /* --- Borders / strokes ---------------------------------------------- */
  --border: #242421;
  --border-strong: #363632;
  --border-faint: #1a1a18;

  /* --- Accent (acid lime) --------------------------------------------- */
  --accent: #d4f60a;
  --accent-hover: #e3ff45;
  --accent-active: #c0e000;
  --accent-text: #d4f60a;          /* lime used as text/icon color */
  --accent-muted: rgba(212, 246, 10, 0.12);
  --accent-border: rgba(212, 246, 10, 0.38);

  /* --- Semantic -------------------------------------------------------- */
  --success: #4ade80;
  --success-text: #6fe89c;
  --success-muted: rgba(74, 222, 128, 0.12);
  --warning: #fbbf24;
  --warning-text: #fbd34d;
  --warning-muted: rgba(251, 191, 36, 0.12);
  --error: #ff5c5c;
  --error-text: #ff8080;
  --error-muted: rgba(255, 92, 92, 0.12);
  --info: #5ca8ff;
  --info-text: #82bdff;
  --info-muted: rgba(92, 168, 255, 0.12);

  /* --- Focus ----------------------------------------------------------- */
  --focus-ring: rgba(212, 246, 10, 0.55);

  /* --- Elevation (subtle + brutalist hard) ---------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 6px 22px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 18px 60px rgba(0, 0, 0, 0.65);
  --shadow-hard: 4px 4px 0 0 rgba(0, 0, 0, 0.9);
  --shadow-hard-accent: 4px 4px 0 0 var(--accent);
  --shadow-hard-border: 4px 4px 0 0 var(--border-strong);
}

[data-theme="light"] {
  color-scheme: light;

  --background: #f3f1ea;
  --background-subtle: #ece9df;
  --surface: #ffffff;
  --surface-2: #f1eee4;
  --surface-3: #e7e3d6;
  --overlay: rgba(243, 241, 234, 0.72);

  --foreground: #0a0a0a;
  --foreground-muted: #595850;
  --foreground-subtle: #86857a;
  --foreground-faint: #b6b3a6;
  --on-accent: #0a0a0a;

  --border: #d9d5c7;
  --border-strong: #c2bdac;
  --border-faint: #e6e2d6;

  --accent: #c6e600;          /* slightly deeper lime so it reads on cream */
  --accent-hover: #b6d400;
  --accent-active: #a6c200;
  --accent-text: #5d6e00;     /* readable lime-olive text on cream */
  --accent-muted: rgba(150, 176, 0, 0.16);
  --accent-border: rgba(120, 142, 0, 0.4);

  --success: #16a34a;
  --success-text: #15803d;
  --success-muted: rgba(22, 163, 74, 0.12);
  --warning: #d97706;
  --warning-text: #b45309;
  --warning-muted: rgba(217, 119, 6, 0.14);
  --error: #dc2626;
  --error-text: #b91c1c;
  --error-muted: rgba(220, 38, 38, 0.1);
  --info: #2563eb;
  --info-text: #1d4ed8;
  --info-muted: rgba(37, 99, 235, 0.1);

  --focus-ring: rgba(120, 142, 0, 0.45);

  --shadow-sm: 0 1px 2px rgba(40, 38, 30, 0.12);
  --shadow-md: 0 6px 22px rgba(40, 38, 30, 0.12);
  --shadow-lg: 0 18px 60px rgba(40, 38, 30, 0.18);
  --shadow-hard: 4px 4px 0 0 rgba(10, 10, 10, 0.85);
  --shadow-hard-accent: 4px 4px 0 0 var(--accent);
  --shadow-hard-border: 4px 4px 0 0 var(--border-strong);
}

:root {
  /* --- Typography: families ------------------------------------------- */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* --- Typography: scale ---------------------------------------------- */
  --text-2xs: 0.6875rem;   /* 11 */
  --text-xs: 0.75rem;      /* 12 */
  --text-sm: 0.8125rem;    /* 13 */
  --text-base: 0.9375rem;  /* 15 */
  --text-md: 1rem;         /* 16 */
  --text-lg: 1.125rem;     /* 18 */
  --text-xl: 1.375rem;     /* 22 */
  --text-2xl: 1.75rem;     /* 28 */
  --text-3xl: 2.25rem;     /* 36 */
  --text-4xl: 3rem;        /* 48 */
  --text-5xl: 4rem;        /* 64 */
  --text-6xl: 5.5rem;      /* 88 */
  --text-hero: clamp(3rem, 12vw, 11rem);

  /* --- Typography: weights -------------------------------------------- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  /* --- Typography: line-height & tracking ----------------------------- */
  --leading-none: 1;
  --leading-tight: 1.05;
  --leading-snug: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --tracking-tighter: -0.03em;
  --tracking-tight: -0.015em;
  --tracking-normal: 0;
  --tracking-wide: 0.06em;
  --tracking-label: 0.14em;   /* uppercase mono technical labels */

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

  /* --- Radii (brutalist = mostly sharp) ------------------------------- */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* --- Border widths --------------------------------------------------- */
  --border-width: 1px;
  --border-width-thick: 2px;

  /* --- Motion ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;

  /* --- Layout ---------------------------------------------------------- */
  --container-max: 1320px;
  --sidebar-width: 272px;
  --header-height: 56px;
  --grid-unit: 8px;

  /* --- Z-index --------------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-header: 200;
  --z-dropdown: 300;
  --z-drawer: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;
}