/* ============================================================
   DIAL3D Design Tokens
   The visual language of DIAL3D — clinical-meets-cinematic.
   Charcoal at rest, gradient in motion.
   ============================================================ */

/* Brand fonts — all three loaded locally from /fonts as user-supplied variable TTFs */
@font-face {
  font-family: 'Sora';
  src: url('../fonts/Sora-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/Sora-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Manrope';
  src: url('../fonts/Manrope-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/Manrope-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype-variations'),
       url('../fonts/JetBrainsMono-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- COLORS ---------- */
  /* Foundation — neutrals carry 95% of every screen */
  --d3-ink:        #2A2E2D;   /* primary charcoal — DIAL wordmark */
  --d3-ink-soft:   #3A3F3E;   /* body copy */
  --d3-ink-mute:   #5C625F;   /* labels, captions, secondary */
  --d3-paper:      #FFFFFF;   /* card surface */
  --d3-paper-warm: #FAF8F5;   /* page background — warm white */
  --d3-fog:        #ECEDEB;   /* borders, dividers */
  --d3-fog-deep:   #CACCCB;   /* heavier dividers */

  /* Signature gradient stops — sampled from the logo */
  --d3-red:        #ED1E29;   /* gradient 0% — urgency, signal */
  --d3-magenta:    #A12668;   /* gradient 28% — transition */
  --d3-purple:     #4935BC;   /* gradient 50–55% — intelligence */
  --d3-indigo:     #3458CA;   /* gradient 78% — clinical */
  --d3-blue:       #1E7BD6;   /* gradient 100% — calm, tech */

  /* Logo gradient — exact 3-stop sample */
  --d3-gradient: linear-gradient(90deg,
    #ED1E29 0%, #4935BC 50%, #1E7BD6 100%);

  /* Marketing gradient — extended 5-stop */
  --d3-gradient-rich: linear-gradient(90deg,
    #ED1E29 0%, #A12668 28%, #4935BC 55%, #3458CA 78%, #1E7BD6 100%);

  /* Soft gradient wash — backgrounds, hover halos */
  --d3-gradient-soft: linear-gradient(90deg,
    rgba(237,30,41,0.08), rgba(73,53,188,0.08), rgba(30,123,214,0.08));

  /* Semantic */
  --d3-success: #1B7F3E;
  --d3-warn:    #C68A12;
  --d3-danger:  #B33437;
  --d3-info:    #1E7BD6;

  /* ---------- SEMANTIC COLOR ALIASES ---------- */
  --fg1: var(--d3-ink);
  --fg2: var(--d3-ink-soft);
  --fg3: var(--d3-ink-mute);
  --fg-inverse: var(--d3-paper);
  --bg1: var(--d3-paper-warm);
  --bg2: var(--d3-paper);
  --bg-inverse: var(--d3-ink);
  --border: var(--d3-fog);
  --border-strong: var(--d3-fog-deep);
  --accent: var(--d3-gradient);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Sora', system-ui, -apple-system, sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-display-xl: clamp(56px, 9vw, 132px);
  --fs-display-l:  clamp(40px, 5vw, 88px);
  --fs-h1:         clamp(36px, 4.4vw, 60px);
  --fs-h2:         44px;
  --fs-h3:         22px;
  --fs-lede:       19px;
  --fs-body:       16px;
  --fs-body-sm:    14px;
  --fs-caption:    12px;
  --fs-mono:       13px;
  --fs-mono-sm:    11px;

  /* ---------- SPACING (8-pt soft grid) ---------- */
  --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;

  /* ---------- RADII ---------- */
  --d3-radius-sm: 6px;     /* chips, tags */
  --d3-radius:    14px;    /* cards, inputs */
  --d3-radius-lg: 28px;    /* feature blocks, modals */
  --d3-radius-pill: 999px; /* buttons */

  /* ---------- SHADOWS ---------- */
  --d3-shadow-sm: 0 1px 0 rgba(42,46,45,0.04);
  --d3-shadow:    0 1px 0 rgba(42,46,45,0.04), 0 18px 40px -22px rgba(42,46,45,0.18);
  --d3-shadow-lg: 0 1px 0 rgba(42,46,45,0.04), 0 32px 60px -28px rgba(42,46,45,0.28);
  --d3-shadow-gradient: 0 8px 32px -12px rgba(73,53,188,0.35);

  /* ---------- MOTION ---------- */
  --d3-ease:       cubic-bezier(0.2, 0.6, 0.2, 1);
  --d3-ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --d3-dur-fast:   180ms;
  --d3-dur-base:   320ms;
  --d3-dur-slow:   600ms;
  --d3-dur-pulse:  2400ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   ============================================================ */

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--fg1);
  background: var(--bg1);
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--fg1);
}
h1, .h1 {
  font-size: var(--fs-display-l);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
h2, .h2 {
  font-size: var(--fs-h1);
  font-weight: 700;
}
h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
}
h4, .h4 {
  font-size: var(--fs-body-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fg3);
}

p {
  font-size: var(--fs-body);
  color: var(--fg2);
  max-width: 60ch;
}
.lede {
  font-size: var(--fs-lede);
  color: var(--fg2);
  max-width: 64ch;
  font-weight: 400;
}

code, .mono, kbd {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.02em;
}

/* Section tag — JetBrains Mono uppercase with leading rule */
.section-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg3);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.section-tag::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--fg1);
  display: inline-block;
}

/* Gradient text — reserved for "3D" wordmark, hero accents, big numbers */
.gradient-text {
  background: var(--d3-gradient-rich);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============================================================
   USAGE NOTES (read me)
   --------------------------------------------------------------
   • 95% of every surface is neutral. Reach for the gradient
     only when a moment is *the* moment on the screen.
   • Default page bg is --d3-paper-warm (#FAF8F5), not white.
   • Body copy = --d3-ink-soft. Pure ink is for headlines + UI.
   • Buttons are pill (999px) — never square. Cards are 14px.
   • Mono is tracking-heavy + uppercase. Body is never uppercase.
   ============================================================ */