/* ============================================================
 * PHNTM // AZUL - design tokens (motion · depth · color · type)
 * Canonical values per docs/STYLE-GUIDE.md. The guide wins over the
 * PREMIUM-POLISH spec wherever they disagree.
 * ARKHM | 2026-05-25  (Premium Polish M1 - reconciled to guide)
 * ============================================================
 * Loaded globally via @import at the top of theme.css. Variable fonts
 * are SELF-HOSTED (no CDN <link>s) - local-first / offline / no
 * telemetry per the tenets. The JetBrains Mono @font-face redefines the
 * family the app already references so it gains the variable weight axis.
 * ----------------------------------------------------------- */

/* Variable fonts (self-hosted woff2). Both the canonical "Inter Variable" /
   "JetBrains Mono Variable" family names the style guide uses AND the legacy
   "Inter" / "JetBrains Mono" aliases (so existing references keep working).
   format('woff2') is the reliable modern hint - the older 'woff2-variations'
   hint was being skipped by some engines, leaving the page on system fonts. */
@font-face {
  font-family: 'Inter Variable';
  src: url('/static/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/static/fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono Variable';
  src: url('/static/fonts/JetBrainsMono-variable.woff2') format('woff2');
  font-weight: 100 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/static/fonts/JetBrainsMono-variable.woff2') format('woff2');
  font-weight: 100 800; font-style: normal; font-display: swap;
}

/* Archivo carries the interface. Source Serif carries anything read at
   length. Mono stays what it always should have been: the face for data.
   One mono doing chrome, prose and data flattened every hierarchy in the app,
   because every glyph is the same width and nothing can be emphasised by
   shape. Self-hosted like the other two, per the tenets. ARKHM | 2026-08-31 */
@font-face {
  font-family: 'Archivo Variable';
  src: url('/static/fonts/Archivo-variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/static/fonts/Archivo-variable.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Serif 4 Variable';
  src: url('/static/fonts/SourceSerif4-variable.woff2') format('woff2');
  font-weight: 200 900; font-style: normal; font-display: swap;
}

:root {
  /* ── Motion: durations (nothing animates longer than 400ms) ── */
  --motion-instant: 60ms;   /* tap feedback, hover */
  --motion-fast:   160ms;   /* button states, small reveals */
  --motion-base:   240ms;   /* card transitions, drawer slides */
  --motion-slow:   380ms;   /* page transitions, large reveals */

  /* ── Motion: easing. Refined decel is the DEFAULT - no overshoot.
        Heavy springs (e.g. 0.34,1.56,...) are banned (read as cartoony). ── */
  --ease-refined:     cubic-bezier(0.16, 1, 0.3, 1);      /* default */
  --ease-out-quart:   cubic-bezier(0.165, 0.84, 0.44, 1); /* gentle state transitions */
  --ease-spring-soft: cubic-bezier(0.25, 1.25, 0.5, 1);   /* gentle overshoot - rare, entries/completions */
  --ease-in-out:      cubic-bezier(0.65, 0, 0.35, 1);

  /* ── Depth: translucent glass + soft shadow. NO glow halos. ── */
  --lift-rest:   0 1px 2px rgba(0, 0, 0, 0.2);
  --lift-hover:  0 4px 16px rgba(0, 0, 0, 0.3), 0 0 1px rgba(0, 100, 200, 0.22);
  --lift-active: 0 8px 24px rgba(0, 0, 0, 0.4);
  --lift-modal:  0 20px 60px rgba(0, 0, 0, 0.55);
  --lift-focus:  0 0 0 2px rgba(46, 155, 255, 0.4);

  /* ── Color: base ── */
  --bg-base:        #04060a;
  --bg-elevated:    rgba(255, 255, 255, 0.025);
  --bg-elevated-hi: rgba(255, 255, 255, 0.06);
  --bg-glass:       rgba(20, 24, 31, 0.88);

  /* ── Color: borders (0.5px everywhere except focus rings) ── */
  --border-rest:    rgba(255, 255, 255, 0.06);
  --border-hover:   rgba(0, 100, 200, 0.22);
  --border-strong:  rgba(255, 255, 255, 0.14);
  --border-divider: rgba(255, 255, 255, 0.05);

  /* ── Color: text ── */
  --text-primary: var(--text);
  --text-secondary: var(--text-dim);
  --text-muted: #8494a3;
  --text-faint: var(--text-muted);

  /* ── Color: accent (DESATURATED azul, the brand - ~5% of pixels;
        never the neon green it replaces, never a background fill) ── */
  --azul-pure:   #2e9bff;
  --azul-bright: #6fbeff;
  --azul-glow:   rgba(0, 100, 200, 0.12);   /* subtle hover tint, not a halo */
  --azul-tint:   rgba(0, 100, 200, 0.08);   /* selection highlights */

  /* ── Color: semantic ── */
  --ok:        #2e9bff;
  --warn:      #f5b942;
  --warn-text: #d4a574;
  --danger:    #ef4444;
  --info:      #7dd8f9;

  /* ── Type: sans is the default; mono only for IDs/codes/timestamps/wordmark ── */
  /* Archivo first, Inter kept behind it so a missing file degrades to
     what the app looked like yesterday rather than to Arial. */
  --font-sans: 'Archivo Variable', 'Inter Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  /* Interface chrome. One token so the whole experiment is
     reversible: point it back at --font-mono and the app looks
     exactly like it did. ARKHM | 2026-08-31 */
  --font-chrome: var(--font-sans);
  --font-read: 'Source Serif 4 Variable', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono Variable', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;

  /* ── Radii ── */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 15px; --r-full: 999px;
}

/* ── View Transitions (cross-document) - refined cross-fade, no overshoot ── */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: var(--motion-slow);
  animation-timing-function: var(--ease-refined);
}
::view-transition-group(*) {
  animation-duration: var(--motion-slow);
  animation-timing-function: var(--ease-refined);
}

/* ── Accessibility: reduced-motion drops springs + view transitions,
      keeps only instant fades. ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}