/* ═══════════════════════════════════════════════════════════
   MDC Brand System — Design Tokens
   Extracted from MDC Clarity Statements Monday Review (Apr 2026)
   ═══════════════════════════════════════════════════════════

   HOW TO USE
   Import this file into any MDC design:
     <link rel="stylesheet" href="Tokens.css">
   Then reference tokens with `var(--mdc-blue)` etc.

   ═══════════════════════════════════════════════════════════ */

:root {
  /* ─── BRAND BLUES ─────────────────────────────────────────── */
  --mdc-blue:        #1F5BFF;   /* Primary brand blue — CTAs, accents */
  --mdc-blue-dark:   #0B3FC2;   /* Pressed / hover state */
  --mdc-blue-deep:   #0A2A8A;   /* On-dark backgrounds, closer slides */
  --mdc-blue-sky:    #050B2E;   /* Near-black navy base */
  --mdc-blue-tint:   #E6EDFF;   /* Subtle fills, selected states */

  /* ─── ISOTYPE GRADIENT ────────────────────────────────────── */
  /* Official logo gradient, measured from Full_Color-Iso.png */
  --mdc-iso-cyan:    #0886FF;   /* Top-left of isotype */
  --mdc-iso-violet:  #5E1FFF;   /* Bottom-right of isotype */

  /* ─── NEUTRALS ─────────────────────────────────────────────── */
  --mdc-bg:          #EEF0F2;   /* Default slide background */
  --mdc-paper:       #F7F8FA;   /* Cards, raised surfaces */
  --mdc-white:       #FFFFFF;
  --mdc-ink:         #1A1A1A;   /* Primary text on light */
  --mdc-ink-soft:    #5B6268;   /* Secondary text, labels */
  --mdc-ink-faint:   #9AA0A6;   /* Micro-type, disclaimers */
  --mdc-line:        rgba(26, 26, 26, 0.10);   /* Hairline dividers */
  --mdc-line-strong: rgba(26, 26, 26, 0.20);

  /* ─── TYPE ─────────────────────────────────────────────────── */
  --mdc-font-sans:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mdc-font-mono:   'JetBrains Mono', 'SF Mono', 'Consolas', monospace;

  /* Display (hero headlines) */
  --mdc-size-display-xl: 240px;   /* "Thank you." close */
  --mdc-size-display-lg: 144px;   /* Title slide headline */
  --mdc-size-display-md: 124px;   /* Quiz prompt */
  --mdc-size-display-sm: 110px;   /* Closer slide headline */

  /* Body (text on slides, paragraphs) */
  --mdc-size-body-xl:    64px;    /* "Exist / Behave / Aspiration" bullets */
  --mdc-size-body-lg:    56px;    /* Quiz answer text */
  --mdc-size-body-md:    30px;    /* Title slide subhead */
  --mdc-size-body-sm:    24px;    /* Category labels, recap text */

  /* Chrome (labels, micro-type, nav) */
  --mdc-size-label-lg:   22px;    /* Eyebrow labels */
  --mdc-size-label-md:   18px;    /* Topnav labels */
  --mdc-size-label-sm:   14px;    /* Mono bar footer, tags */
  --mdc-size-label-xs:   11px;    /* Mono mini-labels */

  /* Line heights */
  --mdc-leading-tight:  1.02;     /* Display headlines */
  --mdc-leading-snug:   1.15;     /* Large body */
  --mdc-leading-normal: 1.45;     /* Paragraphs */

  /* Letter spacing */
  --mdc-tracking-display: -0.02em;  /* Tight for large type */
  --mdc-tracking-body:     0;
  --mdc-tracking-label:    0.14em;  /* Wide for mono uppercase labels */

  /* ─── SPACING SCALE ────────────────────────────────────────── */
  --mdc-space-1:  4px;
  --mdc-space-2:  8px;
  --mdc-space-3:  12px;
  --mdc-space-4:  16px;
  --mdc-space-5:  24px;
  --mdc-space-6:  32px;
  --mdc-space-7:  48px;
  --mdc-space-8:  60px;
  --mdc-space-9:  80px;
  --mdc-space-10: 100px;   /* Standard slide safe-margin (left/right) */

  /* ─── RADII ────────────────────────────────────────────────── */
  --mdc-radius-sm:   4px;
  --mdc-radius-md:   8px;
  --mdc-radius-lg:   12px;
  --mdc-radius-xl:   20px;
  --mdc-radius-pill: 9999px;

  /* ─── SHADOWS ──────────────────────────────────────────────── */
  --mdc-shadow-sm: 0 1px 2px rgba(10, 42, 138, 0.08);
  --mdc-shadow-md: 0 8px 24px rgba(10, 42, 138, 0.12);
  --mdc-shadow-lg: 0 24px 60px rgba(10, 42, 138, 0.18);

  /* ─── MOTION ───────────────────────────────────────────────── */
  --mdc-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --mdc-ease-enter:    cubic-bezier(0, 0, 0.2, 1);
  --mdc-ease-exit:     cubic-bezier(0.4, 0, 1, 1);
  --mdc-ease-emphasis: cubic-bezier(0.65, 0, 0.35, 1);
  --mdc-dur-fast:      180ms;
  --mdc-dur-base:      280ms;
  --mdc-dur-slow:      600ms;
  --mdc-dur-loop:      6s;     /* Logo reveal cycle */
}

/* ─── REUSABLE COMPONENT STYLES ─────────────────────────────── */

/* The MDC logo gradient — for isotype stroke, icon fills */
.mdc-gradient-fill {
  background: linear-gradient(135deg, var(--mdc-iso-cyan), var(--mdc-iso-violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Dark navy background (title / closer slides) */
.mdc-bg-navy {
  background:
    radial-gradient(ellipse at 72% 50%, rgba(43, 107, 255, 0.35) 0%, rgba(10, 42, 138, 0) 55%),
    radial-gradient(ellipse at 50% 100%, rgba(94, 31, 255, 0.25) 0%, rgba(10, 42, 138, 0) 60%),
    linear-gradient(135deg, var(--mdc-blue-sky) 0%, var(--mdc-blue-deep) 60%, var(--mdc-blue-dark) 100%);
  color: var(--mdc-white);
}

/* Bright brand-blue background (closer / CTA slides) */
.mdc-bg-blue {
  background: var(--mdc-blue);
  color: var(--mdc-white);
}

/* Eyebrow label — small caps/mono above headlines */
.mdc-eyebrow {
  font-family: var(--mdc-font-mono);
  font-size: var(--mdc-size-label-sm);
  letter-spacing: var(--mdc-tracking-label);
  text-transform: uppercase;
  color: var(--mdc-blue);
  font-weight: 500;
}