/* ============================================================================
   brandcurl design tokens — the single source of truth.
   Direction: "instrument". The chrome is a quiet dark lab surface; every screen
   defers to the SUBJECT (the extracted brand's real logo, colors, type). The
   tool wears the identity it reads: --accent is set at runtime from the brand's
   primary color, so the page tints to whatever it just extracted.
   No serif anywhere — that is the deliberate anti-default.
   ============================================================================ */
:root {
  /* Surfaces — near-black, hairline-separated */
  --bg:            #09090b;
  --surface:       #131316;
  --surface-2:     #1b1b1f;
  --surface-3:     #232329;
  --border:        #26262b;
  --border-soft:   #1c1c20;

  /* Text */
  --ink:           #fafafa;
  --ink-2:         #a1a1aa;
  --ink-3:         #71717a;
  --ink-4:         #52525b;

  /* Runtime brand accent — JS overrides --accent with the extracted primary.
     Default is a neutral so nothing looks "chosen" before a brand loads. */
  --accent:        #a1a1aa;
  --accent-ink:    #09090b;   /* text that sits ON the accent; JS flips per luminance */

  /* Status */
  --ok:            #22c55e;
  --warn:          #eab308;
  --err:           #ef4444;
  --err-bg:        rgba(239, 68, 68, 0.08);

  /* Type — mono is the dominant voice; the grotesque appears only at the few
     large moments. */
  --font-ui:   'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Type scale (px) */
  --t-display: 44px;   /* brand name, hero title */
  --t-title:   28px;   /* section-scale headings when needed */
  --t-body:    15px;   /* prose */
  --t-sm:      13px;   /* dense UI text */
  --t-data:    12.5px; /* mono data values */
  --t-label:   11px;   /* mono labels */
  --t-micro:   9px;    /* eyebrow captions */

  /* Weights */
  --w-reg: 400;
  --w-med: 500;
  --w-semi: 600;
  --w-bold: 700;

  /* Space — 4px grid */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --s-12: 48px; --s-14: 56px; --s-16: 64px; --s-20: 80px;

  /* Radius */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 100px;

  /* Elevation */
  --shadow-1: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-2: 0 10px 30px rgba(0,0,0,0.35);
  --shadow-3: 0 18px 45px rgba(0,0,0,0.45);

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-1: 0.15s;
  --dur-2: 0.35s;
  --dur-3: 0.55s;

  /* Layout — a wide "cinematic" canvas so the tool fills the screen instead of
     hiding in a narrow column. Padding grows on larger viewports. */
  --content-max: 1520px;
  --content-pad: 40px;

  /* Accent as translucent washes — for glows, tints, rails. Set alongside
     --accent at runtime; these derive from it via color-mix. */
  --accent-wash: color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 42%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 22%, transparent);
}

@media (max-width: 900px) {
  :root { --content-pad: 24px; }
}
@media (max-width: 560px) {
  :root { --content-pad: 18px; }
}

/* Native form controls / scrollbars follow the resolved theme. */
:root { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

/* Light theme — a soft off-white lab surface. theme.js stamps data-theme;
   "Wear the brand" (inline vars) still overrides both when active. */
:root[data-theme="light"] {
  --bg:            #fafafa;
  --surface:       #ffffff;
  --surface-2:     #f4f4f5;
  --surface-3:     #e9e9ec;
  --border:        #e2e2e6;
  --border-soft:   #ededf0;

  --ink:           #18181b;
  --ink-2:         #52525b;
  --ink-3:         #71717a;
  --ink-4:         #a1a1aa;

  --accent:        #71717a;   /* neutral default until a brand is worn */

  --err-bg:        rgba(239, 68, 68, 0.06);

  --shadow-1: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-2: 0 8px 24px -8px rgba(0,0,0,0.10);
  --shadow-3: 0 18px 45px -14px rgba(0,0,0,0.16);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}