/*
 * Argus design tokens.
 * Derived from proovx.brand/design-system/tokens.js (v1.3)
 * Primary accent swapped: teal #00D4AA → amber #d4840a (anchored to H1519-R6-03).
 * Semantic accents (gold/orange/red) preserved for cross-ecosystem consistency.
 */

:root {
  /* ── Colors ────────────────────────────────────────────────── */

  /* Backgrounds (kurnik void palette) */
  --c-void:     #0e0c0a;
  --c-surface:  #141210;
  --c-elevated: #1e1a17;

  /* Argus amber (primary — everywhere proovx used teal) */
  --c-amber:         #d4840a;
  --c-amber-light:   #f5a623;
  --c-amber-fill:    rgba(212, 132, 10, 0.10);
  --c-amber-border:  rgba(212, 132, 10, 0.28);

  /* Semantic accents — from proovx, preserved */
  --c-gold:    #FFD700;   /* achievement · saved · record */
  --c-orange:  #FF6B2B;   /* intensity · processing · effort */
  --c-red:     #FF3B3B;   /* alert · error · destructive — RESERVED */

  --c-gold-fill:    rgba(255, 215, 0, 0.08);
  --c-orange-fill:  rgba(255, 107, 43, 0.08);
  --c-red-fill:     rgba(255, 59, 59, 0.08);

  --c-gold-border:    rgba(255, 215, 0, 0.25);
  --c-orange-border:  rgba(255, 107, 43, 0.25);
  --c-red-border:     rgba(255, 59, 59, 0.25);

  /* Text on void (kurnik warmth) */
  --c-text-primary:   #e8ddd0;
  --c-text-secondary: rgba(232, 221, 208, 0.60);
  --c-text-tertiary:  rgba(232, 221, 208, 0.33);

  /* Borders (subtle tactical chrome) */
  --c-border-subtle:   rgba(232, 221, 208, 0.06);
  --c-border-default:  rgba(232, 221, 208, 0.10);
  --c-border-emphasis: rgba(232, 221, 208, 0.18);

  /* ── Typography ──────────────────────────────────────────────── */

  --f-brand:    'Audiowide', sans-serif;                       /* wordmark only */
  --f-display:  'Chakra Petch', 'Oxanium', system-ui, sans-serif;
  --f-ui:       'Oxanium', system-ui, -apple-system, sans-serif;
  --f-data:     'B612 Mono', 'JetBrains Mono', ui-monospace, monospace;

  --t-xs:   10px;
  --t-sm:   11px;
  --t-base: 13px;
  --t-md:   15px;
  --t-lg:   18px;
  --t-xl:   24px;
  --t-2xl:  32px;
  --t-3xl:  48px;

  --lh-tight: 1.2;
  --lh-base:  1.3;
  --lh-body:  1.5;

  --ls-tight:  -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.05em;
  --ls-wider:   0.08em;
  --ls-widest:  0.15em;

  /* ── Spacing ─────────────────────────────────────────────────── */

  --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-16: 64px;

  /* ── Borders ─────────────────────────────────────────────────── */

  --bw-thin:    0.5px;
  --bw-default: 1px;
  --bw-accent:  2px;

  --br-sm:   4px;
  --br-md:   6px;
  --br-lg:   8px;
  --br-xl:   12px;
  --br-full: 9999px;

  /* ── Motion ──────────────────────────────────────────────────── */

  --ease-snap:  cubic-bezier(0.2, 0, 0, 1);
  --ease-soft:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   280ms;

  /* ── Background texture (dot-grid hybrid) ─────────────────────── */
  /* Matches proovx spec: 8% dot opacity, 3% grid opacity, 25px spacing */

  --bg-texture:
    radial-gradient(circle at 12.5px 12.5px, rgba(232, 221, 208, 0.08) 1.3px, transparent 1.3px),
    linear-gradient(to right,  rgba(232, 221, 208, 0.03) 0.4px, transparent 0.4px),
    linear-gradient(to bottom, rgba(232, 221, 208, 0.03) 0.4px, transparent 0.4px);
  --bg-texture-size: 25px 25px;
}

/* ── Global reset + base ─────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--c-void);
  background-image: var(--bg-texture);
  background-size: var(--bg-texture-size);
  color: var(--c-text-primary);
  font-family: var(--f-ui);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 600;
  margin: 0;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

h1 { font-size: var(--t-xl);  line-height: var(--lh-tight); letter-spacing: var(--ls-wider); }
h2 { font-size: var(--t-md);  line-height: var(--lh-base);  letter-spacing: var(--ls-wider); }
h3 { font-size: var(--t-base); line-height: var(--lh-base); text-transform: none; letter-spacing: var(--ls-normal); }

a { color: var(--c-amber); text-decoration: none; }
a:hover { color: var(--c-amber-light); }

code, .mono { font-family: var(--f-data); font-size: 0.92em; }

.text-secondary { color: var(--c-text-secondary); }
.text-tertiary  { color: var(--c-text-tertiary); }

/* Selection */
::selection { background: var(--c-amber-fill); color: var(--c-amber-light); }

/* Scrollbar (thin, tactical) */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--c-border-emphasis) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--c-border-emphasis); border-radius: var(--br-full); }
*::-webkit-scrollbar-track { background: transparent; }