/* ==========================================================================
   portfolio.dotshock.ai — DESIGN TOKENS (single source of truth)
   ==========================================================================
   GOVERNANCE (constitution §7 + docs/architecture/DESIGN_SYSTEM.md):
   - Every color, font, spacing, radius, motion, z-index and focus value used
     anywhere in frontend/ or dashboard/ comes from THIS file via var(--*).
   - NEVER redefine a token outside this file. Feature-level overrides live in
     a separate themes layer (frontend/assets/css/themes.css — reserved, not
     yet created) and may only COMPOSE these tokens, never restate raw values.
   - The brand red #C8070A exists in exactly one place: --red, below. Every
     other red in the system is derived (a different verified hex, or
     color-mix() over var(--red)).
   - Enforced by tools/check-tokens.mjs (exits nonzero on hard-coded colors
     outside this file). Run it before calling any UI work done.
   - Dark is the default theme (:root). Light is a FULL PEER: every color
     token has an explicit light value in [data-theme="light"] — no partial
     fallbacks. Non-color tokens (spacing/type/motion/z) are theme-invariant.
   - All contrast claims for these pairs were computed (WCAG 2.x relative
     luminance) before shipping; the measured ratios and the usage rules that
     follow from them are recorded in docs/architecture/DESIGN_SYSTEM.md §5.
   ========================================================================== */

/* --------------------------------------------------------------------------
   SELF-HOSTED FONTS — TODO(owner): the .woff2 files below are NOT in the
   repo yet. See frontend/assets/fonts/README.md for exactly which files to
   obtain and where to drop them. Until they exist, these @font-face rules
   fail silently and the system falls back to the stacks declared in
   --font-display / --font-ui (condensed system faces — honest, readable,
   not pixel-identical). Do not replace with a CDN link: constitution
   requires self-hosting.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/BebasNeue-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/BarlowCondensed-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/BarlowCondensed-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/BarlowCondensed-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("../fonts/BarlowCondensed-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   :root — DARK THEME (default)
   ========================================================================== */
:root {
  color-scheme: dark;

  /* ---- Surfaces (near-black, image-neutral: gallery chrome must recede) */
  --surface: #0C0C0F;   /* page background */
  --panel:   #131318;   /* cards, rails, header */
  --panel-2: #191920;   /* raised: hover states, drawer body */
  --panel-3: #202028;   /* highest: modals, active rows */

  /* ---- Lines (1px hairlines are the primary separator — not shadows) */
  --line:   #272730;    /* default hairline */
  --line-2: #33333D;    /* emphasized border, hover border */

  /* ---- Text */
  --text:       #EDECF2; /* primary — 13.8:1..16.6:1 on all four surfaces */
  --text-dim:   #A9A9B4; /* secondary — >=6.9:1 on all four surfaces */
  --text-faint: #7C7C88; /* >=3:1 only: disabled states & large text ONLY.
                            Never body copy (3.9:1 on --panel-3). */

  /* ---- Brand red — #C8070A lives HERE and nowhere else */
  --red: #C8070A;        /* the brand hex. In dark theme it meets 3:1
                            (non-text) only on --surface/--panel; on raised
                            panels use --red-ui. Never use as text on dark. */
  --red-ui:   #E11417;   /* action red for dark raised panels: >=3.3:1
                            non-text on ALL dark surfaces; white label on it
                            = 4.87:1 (AA). */
  --red-text: #FF6B6E;   /* red as TEXT on dark: >=5.8:1 on all surfaces */
  --on-red:   #FFFFFF;   /* text/icon on solid --red fill: 6.02:1 */
  --red-tint: color-mix(in srgb, var(--red) 12%, transparent); /* soft wash */

  /* ---- Status (text-capable on all four dark surfaces unless noted) */
  --ok:     #3FB950;     /* >=6.4:1 */
  --warn:   #D9A60A;     /* >=7.2:1 */
  --info:   #58A6FF;     /* >=6.4:1 */
  --danger: #E5484D;     /* borders/icons everywhere (>=4.1:1); as TEXT only
                            on --surface/--panel. White on it fails AA — no
                            solid danger fills with white labels in dark;
                            destructive buttons use tint + --danger-text. */
  --danger-text: #FF8085; /* danger as text: >=6.7:1 on all surfaces */
  --ok-tint:     color-mix(in srgb, var(--ok) 12%, transparent);
  --warn-tint:   color-mix(in srgb, var(--warn) 12%, transparent);
  --info-tint:   color-mix(in srgb, var(--info) 12%, transparent);
  --danger-tint: color-mix(in srgb, var(--danger) 12%, transparent);

  /* ---- Focus (never red: a red ring vanishes on red controls) */
  --focus: #6EA8FE;      /* >=6.7:1 on all dark surfaces (needs 3:1) */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus);

  /* ---- Overlay & elevation (used sparingly; lines > shadows) */
  --scrim: rgb(0 0 0 / 0.62);           /* behind drawer/modal */
  --shadow-1: 0 4px 16px rgb(0 0 0 / 0.40);
  --shadow-2: 0 12px 40px rgb(0 0 0 / 0.55);

  /* ---- Typography */
  --font-display: "Bebas Neue", "Arial Narrow", Impact, sans-serif;
  --font-ui: "Barlow Condensed", "Arial Narrow", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace; /* system
                            stack only — order IDs, tokens, admin data */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;        /* Bebas Neue ships 400 only; never fake-bold it */

  /* UI scale (Barlow Condensed) */
  --fs-xs: 0.75rem;      /* 12px — meta labels, badges (use --ls-caps) */
  --fs-sm: 0.875rem;     /* 14px — secondary UI, table cells */
  --fs-base: 1rem;       /* 16px — body default */
  --fs-md: 1.125rem;     /* 18px — emphasized body, card titles */
  --fs-lg: 1.3125rem;    /* 21px — section leads */

  /* Display scale (Bebas Neue) — fluid */
  --fs-display-sm: clamp(1.375rem, 1.10rem + 1.2vw, 1.75rem);
  --fs-display-md: clamp(1.75rem, 1.30rem + 2.2vw, 2.5rem);
  --fs-display-lg: clamp(2.5rem, 1.80rem + 3.5vw, 3.75rem);
  --fs-display-xl: clamp(3.25rem, 2.20rem + 5.5vw, 5.5rem);

  --lh-display: 1.04;    /* Bebas is tall; keep it tight */
  --lh-tight: 1.2;       /* headings, card titles */
  --lh-body: 1.5;        /* running text */
  --ls-display: 0.015em; /* slight tracking opens Bebas at large sizes */
  --ls-caps: 0.08em;     /* uppercase labels in Barlow Condensed */

  /* ---- Layout */
  --container: 1400px;   /* wide: the grid is the product */
  --gutter: clamp(16px, 4vw, 48px);

  /* ---- Spacing (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;
  --space-10: 96px;

  /* ---- Radius */
  --radius-sm: 2px;
  --radius: 4px;         /* brand default (matches dotshock ecosystem) */
  --radius-lg: 8px;
  --radius-full: 999px;

  /* ---- Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* brand curve */
  --dur-fast: 0.14s;     /* hover, small state flips */
  --dur: 0.28s;          /* default transitions */
  --dur-slow: 0.45s;     /* drawer/modal entrances */

  /* ---- Z-index (only these values, ever) */
  --z-below: -1;
  --z-base: 0;
  --z-raised: 10;        /* card hover chrome, dropdowns in flow */
  --z-sticky: 100;       /* sticky filter rail */
  --z-header: 200;       /* site header */
  --z-overlay: 300;      /* scrim */
  --z-drawer: 400;       /* cart drawer */
  --z-modal: 500;        /* dialogs, checkout frame */
  --z-toast: 600;        /* notifications */
}

/* ==========================================================================
   [data-theme="light"] — LIGHT THEME (full peer: every color re-declared)
   Non-color tokens inherit from :root by design (theme-invariant).
   ========================================================================== */
[data-theme="light"] {
  color-scheme: light;

  /* ---- Surfaces */
  --surface: #F5F5F7;
  --panel:   #FFFFFF;
  --panel-2: #EFEFF2;
  --panel-3: #E7E7EC;

  /* ---- Lines */
  --line:   #D9D9E0;
  --line-2: #C4C4CE;

  /* ---- Text */
  --text:       #17171C; /* 14.5:1..17.9:1 on all four surfaces */
  --text-dim:   #5A5A66; /* >=5.5:1 on all four surfaces */
  --text-faint: #83838E; /* >=3:1 only: disabled & large text ONLY */

  /* ---- Brand red — on light, the brand hex itself is text-capable */
  --red: #C8070A;        /* 4.88:1..6.02:1 on all light surfaces */
  --red-ui:   var(--red);
  --red-text: var(--red);
  --on-red:   #FFFFFF;   /* 6.02:1 on --red */
  --red-tint: color-mix(in srgb, var(--red) 3%, transparent); /* was 8% —
                            measured 2026-07-21 (tools/check-contrast.mjs):
                            --red-text on --red-tint over --panel-3 failed
                            AA at 8% (4.26:1); 3% clears all four surfaces
                            with margin (4.63:1 worst case) while staying a
                            visible wash. See DESIGN_SYSTEM.md §5. */

  /* ---- Status */
  --ok:     #1B7030;     /* >=5.0:1 on all light surfaces */
  --warn:   #7A5B00;     /* >=5.1:1 */
  --info:   #0A5BD3;     /* >=4.9:1 */
  --danger: #B01E24;     /* >=5.6:1 — text-capable everywhere on light */
  --danger-text: #B01E24;
  --ok-tint:     color-mix(in srgb, var(--ok) 10%, transparent);
  --warn-tint:   color-mix(in srgb, var(--warn) 10%, transparent);
  --info-tint:   color-mix(in srgb, var(--info) 10%, transparent);
  --danger-tint: color-mix(in srgb, var(--danger) 10%, transparent);

  /* ---- Focus */
  --focus: #1D4ED8;      /* >=5.4:1 on all light surfaces (needs 3:1) */
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--focus);

  /* ---- Overlay & elevation */
  --scrim: rgb(12 12 15 / 0.45);
  --shadow-1: 0 4px 16px rgb(12 12 15 / 0.10);
  --shadow-2: 0 12px 40px rgb(12 12 15 / 0.16);
}

/* ==========================================================================
   Reduced motion — token-level, so every consumer inherits it for free
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0.01s;
    --dur: 0.01s;
    --dur-slow: 0.01s;
  }
}