/* TECHTOPIA / DESIGN CONTRACT — DF-DP-001
 * Plane 0: atmosphere, Plane 1: story & products, Plane 2: decisions.
 * A single interactive signal (--df-color-action-primary) is authoritative.
 * Neutral and informational cyan must never impersonate a purchase CTA.
 * All sizes are fluid. Decorative clipping is local only.
 */
:root {
  --brand-primary-action: #ffcf32;
  --brand-on-primary-action: #091227;
  --brand-primary-action-hover: #ffe17b;
  --brand-focus: #ffcf32;
  --brand-text: #f4f8ff;
  --brand-text-muted: #b0bed4;
  --brand-surface: #080f23;
  --brand-surface-raised: #122039;
  --brand-danger: #ff6e82;
  --brand-warning: #e7b64f;
  --brand-success: #69d8a4;
  --df-color-action-primary: var(--brand-primary-action);
  --df-color-action-on-primary: var(--brand-on-primary-action);
  --df-color-action-hover: var(--brand-primary-action-hover);
  --df-color-focus: var(--brand-focus);
  --df-color-text: var(--brand-text);
  --df-color-text-muted: var(--brand-text-muted);
  --df-color-surface: var(--brand-surface);
  --df-color-surface-raised: var(--brand-surface-raised);
  --df-color-danger: var(--brand-danger);
  --df-color-warning: var(--brand-warning);
  --df-color-success: var(--brand-success);
  --c-bg: #080f23;
  --c-bg-deep: #030712;
  --c-ink: #f4f8ff;
  --c-muted: #b0bed4;
  --c-dim: #7f93b1;
  --c-outline: rgba(162,195,237,.18);
  --c-line: rgba(162,195,237,.12);
  --c-panel: #101d34;
  --c-panel-light: #15253f;
  --c-cyan: #83e5ff;
  --c-blue: #276cff;
  --c-blue-deep: #092b61;
  --c-yellow: var(--df-color-action-primary);
  --c-yellow-glow: rgba(255,207,50,.2);
  --c-cyan-glow: rgba(131,229,255,.22);
  --font-body: Inter, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --font-display: Impact, "Arial Narrow", "Helvetica Neue Condensed", "Franklin Gothic Medium", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --font-editorial: Georgia, "Times New Roman", serif;
  --container: 1340px;
  --gutter: clamp(18px, 4.8vw, 74px);
  --section: clamp(88px, 10.4vw, 172px);
  --radius-small: 5px;
  --radius-medium: 16px;
  --radius-large: 28px;
  --radius-xl: 34px;
  --shadow-depth: 0 32px 90px rgba(0,0,0,.44);
  --shadow-book: 18px 30px 43px rgba(0,0,0,.62);
  --ease-expo: cubic-bezier(.16,1,.3,1);
  --ease-smooth: cubic-bezier(.2,.75,.25,1);
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --t-fast: 180ms;
  --t-normal: 380ms;
  --t-slow: 900ms;
  --header-height: 82px;
  --z-background: 0;
  --z-subject: 1;
  --z-interaction: 2;
  --z-header: 40;
  --z-dialog: 100;
  --z-toast: 110;
  --reader-font-size: 1.25rem;
}
@media (prefers-contrast: more) {
  :root {
    --brand-text-muted: #dde9f7;
    --c-muted: #dde9f7;
    --c-dim: #bed2ef;
    --c-outline: rgba(235,245,255,.62);
    --c-line: rgba(235,245,255,.32);
  }
}