/* ==========================================================================
   Nico Delgado — Design System tokens.
   Sourced from nico delgado dev design.zip (_ds/tokens/*).
   Tailwind --cmp-* bridge appended for admin/utility pages.
   ========================================================================== */

:root {
  /* --- Ink scale: near-black canvas -> raised surfaces --- */
  --ink-1000: #0a0a0c;
  --ink-900: #0e0e11;
  --ink-800: #131318;
  --ink-700: #1b1b21;
  --ink-600: #25252d;
  --ink-500: #32323b;
  --ink-400: #45454f;

  --paper: #f7f6f3;
  --paper-2: #ece9e3;

  /* --- Red: primary accent / action --- */
  --red-50: #ffe7e7;
  --red-300: #ff7d7d;
  --red-400: #f85a5e;
  --red-500: #ee3b41;
  --red-600: #d92a30;
  --red-700: #b81f25;
  --red-fill: #cf2230;
  --red-fill-hover: #b81f25;
  --red-fill-press: #9c1a20;

  /* --- Gold: secondary accent / highlight (sparing) --- */
  --gold-50: #fff3d4;
  --gold-300: #ffd874;
  --gold-500: #f5b73c;
  --gold-600: #e0a224;
  --gold-700: #bd8413;

  /* --- Neutral text on dark --- */
  --white: #fafaf8;
  --grey-200: #d4d4d8;
  --grey-400: #9a9aa4;
  --grey-500: #82828c;
  --grey-600: #52525b;

  /* --- Status --- */
  --success: #34c97f;
  --warning: var(--gold-500);
  --danger: var(--red-500);

  /* ======================= SEMANTIC ALIASES ======================= */
  --surface-canvas: var(--ink-1000);
  --surface-base: var(--ink-800);
  --surface-card: var(--ink-700);
  --surface-raised: var(--ink-600);
  --surface-inverse: var(--paper);

  --text-primary: var(--white);
  --text-secondary: var(--grey-400);
  --text-tertiary: var(--grey-500);
  --text-inverse: var(--ink-1000);
  --text-on-red: #ffffff;
  --text-on-gold: #1c1205;
  --text-on-accent: var(--text-on-red);

  --accent: var(--red-500);
  --accent-hover: var(--red-600);
  --accent-press: var(--red-700);
  --accent-fill: var(--red-fill);
  --accent-fill-hover: var(--red-fill-hover);
  --accent-fill-press: var(--red-fill-press);
  --accent-soft: rgba(238, 59, 65, 0.12);
  --accent-2: var(--gold-500);
  --accent-2-hover: var(--gold-600);
  --accent-2-soft: rgba(245, 183, 60, 0.13);

  --border-subtle: var(--ink-500);
  --border-strong: var(--ink-400);
  --border-accent: var(--red-500);
  --hairline: rgba(255, 255, 255, 0.07);

  --focus-ring: var(--red-500);

  /* --- Typography --- */
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", system-ui, sans-serif;
  --font-body: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;
  --w-extra: 800;

  --fs-hero: clamp(2.5rem, 7.5vw, 5.5rem);
  --fs-display: clamp(2.25rem, 5vw, 4rem);
  --fs-h1: clamp(2rem, 4vw, 3rem);
  --fs-h2: clamp(1.6rem, 2.6vw, 2.25rem);
  --fs-h3: 1.5rem;
  --fs-h4: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-xl: 1.25rem;
  --fs-lg: 1.125rem;
  --fs-base: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-display: 1;
  --lh-tight: 0.96;
  --lh-snug: 1.1;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --ls-tight: -0.03em;
  --ls-snug: -0.015em;
  --ls-normal: 0;
  --ls-wide: 0.08em;
  --ls-wider: 0.16em;

  /* --- Spacing & layout (4px base) --- */
  --space-0: 0;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;

  --section-y: clamp(4rem, 10vw, 8.5rem);
  --gutter: clamp(1.25rem, 5vw, 4rem);

  --container: 1200px;
  --container-narrow: 760px;
  --container-wide: 1440px;

  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;
  --r-pill: 999px;

  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 1000;
  --z-toast: 2000;

  /* --- Effects --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 18px 44px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 30px 72px rgba(0, 0, 0, 0.55);

  --inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  --red-glow: rgba(238, 59, 65, 0.18);
  --gold-glow: rgba(245, 183, 60, 0.16);
  --glow-red: 0 4px 18px rgba(238, 59, 65, 0.18);
  --glow-gold: 0 4px 18px rgba(245, 183, 60, 0.16);

  --ring: 0 0 0 3px rgba(238, 59, 65, 0.38);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: var(--ease-out);

  --dur-fast: 0.15s;
  --dur-base: 0.26s;
  --dur-slow: 0.45s;
  --dur-entrance: 0.6s;

  --t-hover: color var(--dur-fast) var(--ease-out),
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);

  /* --- Overlay / texture --- */
  --surface-overlay: rgba(8, 8, 10, 0.94);
  --red-glow-wide: rgba(238, 59, 65, 0.1);
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  /* ======================= Tailwind --cmp-* bridge ======================= */
  --cmp-primary: var(--accent-fill);
  --cmp-primary-hover: var(--accent-fill-hover);
  --cmp-primary-soft: var(--accent-soft);
  --cmp-background: var(--surface-canvas);
  --cmp-surface: var(--surface-card);
  --cmp-foreground: var(--text-primary);
  --cmp-secondary-text: var(--text-secondary);
  --cmp-tertiary-text: var(--text-tertiary);
  --cmp-border: var(--hairline);
  --cmp-muted-foreground: var(--text-tertiary);
  --cmp-accent: var(--ink-700);
  --cmp-accent-foreground: var(--accent);
  --cmp-error: var(--danger);
  --cmp-success: var(--success);
}