/* ============================================================================
   Data Driven Actualization — Colors & Type
   ----------------------------------------------------------------------------
   Distilled from the production site. The full token set lives in
   reference/site-tokens.css; this file exposes the foundational variables you
   actually need to design with (palette + type) plus a small set of semantic
   roles + element styles you can drop straight into prototypes.
   ============================================================================ */

/* ---------- Fonts ---------- */

@font-face {
  font-family: 'Geist';
  src: url('../fonts/quiz/geist-variable.woff2') format('woff2');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/quiz/instrument-serif-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('../fonts/quiz/instrument-serif-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Allerta';
  src: url('../fonts/quiz/allerta-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* =====================================================================
     COLOR — RAW PALETTE
     The brand sits on near-black slate. Cool-white is the body fg. Teal is
     the "signal" colour for the neural net + signage. Steel-blue and gold
     are the two interactive accents (gold = primary CTA, steel = link).
     Crimson red is reserved for emphasis/accents on light surfaces.
     ===================================================================== */

  /* Slate — primary dark surfaces */
  --dda-slate-975: #04060d; /* deepest, header bg */
  --dda-slate-950: #0a0f1e; /* page bg */
  --dda-slate-925: #0c1222;
  --dda-slate-900: #0f1628;
  --dda-slate-850: #141b30;

  /* Cool white — body text on dark */
  --dda-cool-white:        #e4eaf8;
  --dda-cool-white-a92:    rgba(228, 234, 248, 0.92);
  --dda-cool-white-a78:    rgba(228, 234, 248, 0.78);
  --dda-cool-white-a48:    rgba(228, 234, 248, 0.48);
  --dda-cool-white-a30:    rgba(228, 234, 248, 0.30);
  --dda-cool-white-a12:    rgba(228, 234, 248, 0.12);
  --dda-cool-white-a06:    rgba(228, 234, 248, 0.06);

  /* Teal — signal / signage / accent (the neural net) */
  --dda-teal-midnight: #0a1f1d;
  --dda-teal-700:      #1e4d4d;
  --dda-teal-600:      rgb(42, 107, 107);
  --dda-teal-500:      #3a8a8a;
  --dda-teal-450:      rgb(80, 170, 170);
  --dda-teal-400:      rgb(90, 184, 184);
  --dda-teal-350:      rgb(120, 200, 200);
  --dda-teal-300:      rgb(150, 215, 215);
  --dda-teal-250:      rgb(180, 228, 228);
  --dda-teal-200:      rgb(200, 245, 245); /* neuron "fire" */
  --dda-teal-100:      rgb(240, 252, 252);

  /* Steel blue — secondary interactive (links, focus ring) */
  --dda-steel-900: #0c4a6e;
  --dda-steel-800: #075985;
  --dda-steel-700: #0369a1;
  --dda-steel-600: #0284c7;
  --dda-steel-400: #4aa3d9;
  --dda-steel-100: #e0f2fe;

  /* Gold — primary CTA / capsule frame */
  --dda-gold-300:     #e0c97e;
  --dda-gold-500:     #c9a653;
  --dda-gold-700:     #a37e2c;
  --dda-gold-500-a55: rgba(201, 166, 83, 0.55);
  --dda-gold-500-a40: rgba(201, 166, 83, 0.40);
  --dda-gold-500-a25: rgba(201, 166, 83, 0.25);
  --dda-gold-500-a15: rgba(201, 166, 83, 0.15);

  /* Crimson — emphasis accent on light surfaces */
  --dda-red-800: #a61e1e;
  --dda-red-700: #c92a2a;
  --dda-red-500: #e74c3c;
  --dda-red-100: #ffe3e3;

  /* Off-white / ink — light surfaces (Method, Proof, FAQ sections) */
  --dda-offwhite:        #f8fafc;
  --dda-offwhite-card:   #ffffff;
  --dda-offwhite-border: #e2e8f0;
  --dda-ink-950:         #0f172a;
  --dda-ink-600:         #475569;
  --dda-ink-400:         #94a3b8;

  /* Founders card colours (warm-paper light, ink-warm dark) */
  --dda-paper-light:        #e8e1d6;
  --dda-paper-light-text:   #0f172a;
  --dda-paper-light-border: #d4cdc1;
  --dda-paper-dark:         #1f1b16;
  --dda-paper-dark-text:    #e8e1d6;

  /* Section feature colours */
  --dda-method-card-regulate: #0c2b45; /* steel-deep */
  --dda-method-card-debug:    #3f1d24; /* maroon */
  --dda-method-card-track:    #11302b; /* teal-deep */
  --dda-green-midnight:       #143a23; /* numeric-metric inner card */


  /* =====================================================================
     SEMANTIC ROLES — DARK CONTEXT (default)
     ===================================================================== */

  --fg-1:           var(--dda-cool-white);          /* primary text */
  --fg-2:           var(--dda-cool-white-a78);      /* body / secondary */
  --fg-3:           var(--dda-cool-white-a48);      /* tertiary / labels */
  --fg-hairline:    var(--dda-cool-white-a06);
  --fg-border:      var(--dda-cool-white-a12);

  --bg-0:           var(--dda-slate-950);  /* page */
  --bg-1:           var(--dda-slate-925);  /* container */
  --bg-2:           var(--dda-slate-900);  /* raised */
  --bg-3:           var(--dda-slate-850);  /* card on dark */
  --bg-header:      var(--dda-slate-975);
  --bg-scrim:       rgba(0, 0, 0, 0.6);

  /* Interactive */
  --link:           var(--dda-steel-700);
  --link-hover:     var(--dda-steel-800);
  --link-on-dark:   var(--dda-steel-400);
  --focus-ring:     var(--dda-steel-700);

  /* Accents */
  --accent-gold:        var(--dda-gold-500);
  --accent-gold-hover:  var(--dda-gold-300);
  --accent-gold-deep:   var(--dda-gold-700);
  --accent-gold-glow:   var(--dda-gold-500-a40);

  --accent-red:         var(--dda-red-700);
  --accent-red-on-dark: var(--dda-red-500);

  --accent-teal:        var(--dda-teal-500);
  --signal-low:         var(--dda-teal-450);
  --signal-high:        var(--dda-teal-200);

  /* =====================================================================
     SEMANTIC ROLES — LIGHT CONTEXT
     Pair with `.surface-light`, used by Method/Proof/FAQ etc.
     ===================================================================== */
  --fg-1-light:      var(--dda-ink-950);
  --fg-2-light:      var(--dda-ink-600);
  --fg-3-light:      var(--dda-ink-400);
  --bg-light:        var(--dda-offwhite);
  --bg-light-card:   var(--dda-offwhite-card);
  --border-light:    var(--dda-offwhite-border);


  /* =====================================================================
     TYPOGRAPHY — FAMILIES
     Three voices:
       body      → Geist (variable, sans). Default for everything.
       editorial → Instrument Serif. Italic only, inside <em>. For warmth.
       signage   → Allerta. Tiny, all-caps labels. Eyebrows, captions.
     ===================================================================== */
  --font-body:      'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-editorial: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --font-signage:   'Allerta', -apple-system, sans-serif;

  /* Type scale */
  --text-xs:   0.75rem;     /* 12px — signage / eyebrows */
  --text-sm:   0.875rem;    /* 14px — nav, captions */
  --text-base: 1rem;        /* 16px — body */
  --text-md:   1.125rem;    /* 18px — body large */
  --text-lg:   clamp(1.2rem, 1.8vw, 1.65rem);
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;
  --text-3xl:  clamp(2.4rem, 4vw, 3.8rem);   /* H2 */
  --text-4xl:  clamp(3rem, 5.5vw, 5.2rem);   /* H1 / hero */

  /* Leading */
  --leading-tight:   1.18;
  --leading-snug:    1.30;
  --leading-normal:  1.50;
  --leading-relaxed: 1.70;

  /* Tracking */
  --tracking-tight:   -0.03em;
  --tracking-snug:    -0.02em;
  --tracking-normal:  0;
  --tracking-wide:     0.015em;
  --tracking-wider:    0.04em;
  --tracking-widest:   0.12em;    /* Signage / nav uppercase */

  /* =====================================================================
     SPACING / RADIUS / SHADOW
     ===================================================================== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  --radius-1:    2px;
  --radius-2:    4px;
  --radius-card: 12px;
  --radius-pill: 999px;

  --shadow-glow-sm:  0 0 16px rgba(58, 138, 138, 0.25);
  --shadow-glow-md:  0 0 32px rgba(58, 138, 138, 0.35);
  --shadow-lift:     0 20px 60px -20px rgba(0, 0, 0, 0.6);
  --shadow-card-light:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 8px 24px -12px rgba(15, 23, 42, 0.10);

  --blur-header: blur(14px) saturate(120%);
  --blur-soft:   blur(6px);
  --blur-heavy:  blur(24px) saturate(130%);

  /* =====================================================================
     MOTION
     Easings are mostly out-expo for entrances, out-quart for ui.
     ===================================================================== */
  --duration-instant: 80ms;
  --duration-fast:    200ms;
  --duration-medium:  450ms;
  --duration-slow:    600ms;
  --duration-dwell:   1200ms;

  --ease-out-expo:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
}

/* =====================================================================
   ELEMENT DEFAULTS — drop a `dda-prose` (or just rely on element rules)
   to get DDA-styled headings, body, lists, links.
   ===================================================================== */

.dda-body,
body.dda-body {
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-feature-settings: 'ss01' 1, 'cv11' 1, 'kern' 1, 'calt' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dda-prose h1, .dda-h1 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

.dda-prose h2, .dda-h2 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

.dda-prose h3, .dda-h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg-1);
  text-wrap: balance;
  margin: 0;
}

.dda-prose p, .dda-p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
  margin: 0;
}

.dda-prose em, .dda-em {
  font-family: var(--font-editorial);
  font-style: italic;
  font-weight: 400;
}

.dda-eyebrow {
  font-family: var(--font-signage);
  font-size: var(--text-xs);
  font-weight: 400;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-3);
}

.dda-nav-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-1);
  text-decoration: none;
}

.dda-mono-metric {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

a.dda-link {
  color: var(--link-on-dark);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-fast) var(--ease-out-quart);
}
a.dda-link:hover { border-bottom-color: currentColor; }

/* Light surface helper */
.surface-light {
  background: var(--bg-light);
  color: var(--fg-1-light);
}
.surface-light .dda-h1,
.surface-light .dda-h2,
.surface-light .dda-h3 { color: var(--fg-1-light); }
.surface-light .dda-p  { color: var(--fg-2-light); }
.surface-light .dda-eyebrow { color: var(--fg-2-light); }

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0.01ms;
    --duration-fast:    0.01ms;
    --duration-medium:  0.01ms;
    --duration-slow:    0.01ms;
    --duration-dwell:   0.01ms;
  }
}