/* ═══════════════════════════════════════════════════════════════
   VECTOR — Design Token System
   Source of truth for all brand decisions.
   Brand guide: Senior Design Direction & Brand Environment Guide
   Logo palette: Vector_Brand_logo.png
   ═══════════════════════════════════════════════════════════════ */

/* ── IMPORT ── */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Inter:wght@300;400;500&display=swap');

:root {

  /* ── COLOR PALETTE ─────────────────────────────────────────
     Source: Vector_Brand_logo.png color swatches
     Philosophy: natural, warm, architectural, restrained, timeless
     Emotional reference: linen, travertine, oak, soft light, matte paper
  ─────────────────────────────────────────────────────────── */

  /* Backgrounds */
  --bg-primary:     #F4F1EC;   /* warm ivory — primary surface */
  --bg-secondary:   #EDE9E2;   /* slightly deeper ivory — secondary panels */
  --bg-tertiary:    #E7DFD2;   /* soft taupe — cards, inset panels */
  --bg-dark:        #2C2C2C;   /* warm charcoal — dark moments, not pure black */
  --bg-deep:        #0E1B2A;   /* deep navy — reserved for highest contrast moments */
  --bg-white:       #FDFCFA;   /* near-white — lightest surface, never pure #fff */

  /* Ink / Text */
  --ink-primary:    #2C2C2C;   /* warm charcoal — primary body text */
  --ink-secondary:  #5A5248;   /* medium warm brown — secondary text */
  --ink-tertiary:   #8A8278;   /* muted warm — captions, labels */
  --ink-ghost:      #B0A89E;   /* very muted — placeholder, disabled */
  --ink-inverse:    #F4F1EC;   /* warm ivory — text on dark surfaces */
  --ink-inverse-dim:#C8BFB4;   /* dimmed inverse — secondary text on dark */

  /* Accent — Aged Bronze / Gold */
  --accent:         #C8A97A;   /* aged bronze — primary accent from brand palette */
  --accent-deep:    #A8854A;   /* deeper bronze — hover states, pressed */
  --accent-pale:    #EDE3D4;   /* pale bronze wash — subtle tints */
  --accent-muted:   #D4BF9E;   /* muted bronze — borders, dividers */

  /* Stone / Travertine */
  --stone:          #CBBEAA;   /* travertine — mid-tone from palette */
  --stone-light:    #DDD5C8;   /* lighter stone */
  --stone-dark:     #A89880;   /* darker stone */

  /* Semantic */
  --positive:       #4A6741;   /* muted forest green — years recovered, positive delta */
  --positive-pale:  #EBF0EA;   /* pale green wash */
  --caution:        #8B6B3A;   /* warm amber — warnings, age limits */
  --caution-pale:   #F5EDE0;   /* pale amber wash */

  /* Rules / Borders */
  --rule:           rgba(44, 44, 44, 0.08);   /* primary rule — very soft */
  --rule-accent:    rgba(200, 169, 122, 0.25); /* accent rule — bronze tint */
  --rule-strong:    rgba(44, 44, 44, 0.16);   /* stronger divider */

  /* ── TYPOGRAPHY ────────────────────────────────────────────
     Source: brand board typography spec
     Lora Light  — headlines, expressive moments, emotional copy
     Inter       — body, UI labels, supporting text
     No monospace in primary UI — brand is literary not technical
     Exception: data readouts use Inter with letter-spacing
  ─────────────────────────────────────────────────────────── */

  --serif:    'Lora', Georgia, serif;
  --sans:     'Inter', system-ui, -apple-system, sans-serif;

  /* Scale — generous, breathable */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    18px;
  --text-lg:    22px;
  --text-xl:    28px;
  --text-2xl:   36px;
  --text-3xl:   48px;
  --text-4xl:   64px;
  --text-hero:  clamp(44px, 6vw, 80px);

  /* Line height — editorial, generous */
  --leading-tight:  1.2;
  --leading-normal: 1.6;
  --leading-loose:  1.9;
  --leading-editorial: 2.1;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.06em;
  --tracking-wider:   0.12em;
  --tracking-widest:  0.2em;

  /* Weight */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;

  /* ── SPACING ────────────────────────────────────────────────
     Generous — whitespace is emotional architecture
  ─────────────────────────────────────────────────────────── */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;

  /* Section padding — architectural breathing room */
  --section-padding:    clamp(60px, 8vw, 120px);
  --section-padding-sm: clamp(40px, 5vw, 80px);

  /* Container */
  --container:      880px;
  --container-wide: 1100px;

  /* ── MOTION ─────────────────────────────────────────────────
     Cinematic, atmospheric, restrained, graceful, calm.
     Never flashy, energetic, or attention-seeking.
     Use fades, soft reveals, slow opacity changes.
  ─────────────────────────────────────────────────────────── */

  /* Duration */
  --dur-instant:  120ms;
  --dur-fast:     240ms;
  --dur-base:     400ms;
  --dur-slow:     700ms;
  --dur-cinematic: 1100ms;

  /* Easing — all organic, no bounce or overshoot */
  --ease-in:    cubic-bezier(0.4, 0, 1, 1);
  --ease-out:   cubic-bezier(0, 0, 0.2, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-soft:  cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ── BORDERS ────────────────────────────────────────────── */

  --radius-none: 0;          /* VECTOR uses zero radius — architectural */
  --border-thin: 0.5px;
  --border-base: 1px;

  /* ── SHADOWS ────────────────────────────────────────────────
     Very restrained — no dramatic drop shadows
  ─────────────────────────────────────────────────────────── */

  --shadow-soft: 0 2px 20px rgba(44, 44, 44, 0.06);
  --shadow-card: 0 1px 8px rgba(44, 44, 44, 0.08);

}

/* ═══════════════════════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bg-primary);
  color: var(--ink-primary);
  font-family: var(--sans);
  font-size: var(--text-base);
  font-weight: var(--weight-light);
  line-height: var(--leading-loose);
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHIC PRIMITIVES
   ═══════════════════════════════════════════════════════════════ */

/* Serif — Lora: emotional, literary, expressive moments */
.t-serif { font-family: var(--serif); }

/* Eyebrow — quiet structural label */
.t-eyebrow {
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--accent);
}

/* Hero headline */
.t-hero {
  font-family: var(--serif);
  font-size: var(--text-hero);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--ink-primary);
}

/* Section headline */
.t-headline {
  font-family: var(--serif);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: var(--weight-light);
  line-height: var(--leading-tight);
  color: var(--ink-primary);
}

/* Sub-headline */
.t-subhead {
  font-family: var(--serif);
  font-size: var(--text-xl);
  font-weight: var(--weight-light);
  line-height: var(--leading-normal);
  color: var(--ink-primary);
}

/* Body */
.t-body {
  font-family: var(--sans);
  font-size: var(--text-base);
  font-weight: var(--weight-light);
  line-height: var(--leading-loose);
  color: var(--ink-secondary);
}

/* Caption / label */
.t-caption {
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-tertiary);
}

/* Data — Inter with spacing for numerical readouts */
.t-data {
  font-family: var(--sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-wide);
  color: var(--ink-secondary);
}

/* Score — large serif numeral */
.t-score {
  font-family: var(--serif);
  font-size: var(--text-4xl);
  font-weight: var(--weight-light);
  line-height: 1;
  color: var(--ink-primary);
}

/* Italic quote */
.t-quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: var(--weight-light);
  line-height: var(--leading-editorial);
  color: var(--ink-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   LAYOUT PRIMITIVES
   ═══════════════════════════════════════════════════════════════ */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.container-wide {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.section {
  padding: var(--section-padding) 0;
}

.section-sm {
  padding: var(--section-padding-sm) 0;
}

/* ═══════════════════════════════════════════════════════════════
   COMPONENT PRIMITIVES
   ═══════════════════════════════════════════════════════════════ */

/* Rule — the one accent element allowed to use bronze */
.v-rule {
  width: 32px;
  height: 1px;
  background: var(--accent);
  margin: var(--space-5) 0;
}

/* Divider — full width, very soft */
.v-divider {
  width: 100%;
  height: 0.5px;
  background: var(--rule);
}

/* Card — architectural, no radius */
.v-card {
  background: var(--bg-white);
  border: var(--border-thin) solid var(--rule);
  padding: var(--space-6);
}

.v-card-accent {
  background: var(--bg-white);
  border: var(--border-thin) solid var(--rule-accent);
  padding: var(--space-6);
}

/* Button — primary */
.v-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 14px 32px;
  background: var(--ink-primary);
  color: var(--bg-primary);
  border: none;
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--dur-base) var(--ease-soft),
    color var(--dur-base) var(--ease-soft);
}
.v-btn:hover {
  background: var(--accent);
  color: var(--bg-white);
}

/* Button — ghost */
.v-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: 12px 28px;
  background: transparent;
  color: var(--ink-secondary);
  border: var(--border-thin) solid var(--rule-strong);
  font-family: var(--sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition:
    border-color var(--dur-base) var(--ease-soft),
    color var(--dur-base) var(--ease-soft);
}
.v-btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Input — understated, literary */
.v-input {
  width: 100%;
  border: none;
  border-bottom: var(--border-base) solid var(--rule-strong);
  background: transparent;
  font-family: var(--serif);
  font-size: var(--text-md);
  font-weight: var(--weight-light);
  color: var(--ink-primary);
  padding: var(--space-3) 0;
  outline: none;
  transition: border-color var(--dur-base) var(--ease-soft);
}
.v-input:focus { border-bottom-color: var(--accent); }
.v-input::placeholder { color: var(--ink-ghost); }

/* Range slider */
.v-range {
  width: 100%;
  accent-color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════
   MOTION CLASSES
   Soft reveals only. No dramatic entrances.
   ═══════════════════════════════════════════════════════════════ */

.v-fade {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-soft);
}
.v-fade.visible { opacity: 1; }

.v-rise {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-slow) var(--ease-soft),
    transform var(--dur-slow) var(--ease-soft);
}
.v-rise.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger utility — applied via JS delay */
.v-rise:nth-child(2) { transition-delay: 80ms; }
.v-rise:nth-child(3) { transition-delay: 160ms; }
.v-rise:nth-child(4) { transition-delay: 240ms; }

/* ═══════════════════════════════════════════════════════════════
   NAV
   ═══════════════════════════════════════════════════════════════ */

.v-nav {
  padding: var(--space-5) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: var(--border-thin) solid var(--rule);
  position: sticky;
  top: 0;
  background: rgba(244, 241, 236, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 200;
}

.v-wordmark {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-widest);
  color: var(--ink-primary);
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════
   DARK SURFACE
   Warm charcoal — not pure black
   Used sparingly: drive reveal panel only
   Not for score reveal (brand guide says never make users feel scored)
   ═══════════════════════════════════════════════════════════════ */

.v-surface-dark {
  background: var(--bg-dark);
  color: var(--ink-inverse);
}

.v-surface-dark .t-eyebrow {
  color: var(--accent-muted);
}

/* ═══════════════════════════════════════════════════════════════
   SCORE DISPLAY
   Calm, unhurried. The number is important — not dramatic.
   Fade in, not wipe. No dark takeover.
   ═══════════════════════════════════════════════════════════════ */

.v-score-reveal {
  opacity: 0;
  transition: opacity var(--dur-cinematic) var(--ease-soft);
}
.v-score-reveal.visible { opacity: 1; }

/* ═══════════════════════════════════════════════════════════════
   PAYWALL PANEL
   Warm invitation, not urgency gate.
   Slides up softly, not dramatically.
   ═══════════════════════════════════════════════════════════════ */

.v-paywall {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity var(--dur-slow) var(--ease-soft),
    transform var(--dur-slow) var(--ease-soft);
}
.v-paywall.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════
   RADAR CHART COLORS
   ═══════════════════════════════════════════════════════════════ */

:root {
  --radar-fill:        #2C2C2C;    /* warm charcoal fill */
  --radar-fill-opacity: 0.82;
  --radar-grid:        rgba(44, 44, 44, 0.07);
  --radar-axis:        rgba(44, 44, 44, 0.07);
  --radar-point:       #C8A97A;    /* aged bronze dots */
  --radar-label:       #8A8278;    /* ink-tertiary */
  --radar-updated:     #A8854A;    /* accent-deep — highlight updated variable */
}

/* ═══════════════════════════════════════════════════════════════
   MODE ACCENTS
   Subtle — same warm family, different depth
   ═══════════════════════════════════════════════════════════════ */

:root {
  --accent-youth: #C8A97A;   /* default aged bronze — more luminous */
  --accent-prime: #B8956A;   /* slightly deeper */
  --accent-pivot: #A07848;   /* deepest, most gravitas */
}

/* ═══════════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════════ */

@media print {
  body { background: #fff; color: #2C2C2C; }
  .v-nav, .no-print { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  :root {
    --space-6: 24px;
    --section-padding: clamp(48px, 6vw, 80px);
  }
  .container, .container-wide { padding: 0 var(--space-5); }
}

/* ═══════════════════════════════════════════════════════════════
   FONT IMPORT REFERENCE (embed in each HTML file)
   <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
   ═══════════════════════════════════════════════════════════════ */