/* ============================================================
   VANTAGE — Colors & Type
   ------------------------------------------------------------
   Dark-first design system. Warm-dark base (#1A1A19), with
   forest green as the functional accent and gold as the
   prestige / founding-member mark.

   Fonts: DM Sans (display + body), DM Mono (tags, captions,
   numeric). Load from Google Fonts — see fonts/fonts.css.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Mono:ital,wght@0,400;0,500;1,400&display=swap');

:root {
  /* ── CORE SURFACES ────────────────────────────────────── */
  --color-bg:            #1A1A19;   /* page background     */
  --color-surface:       #222221;   /* elevated surface    */
  --color-card:          rgba(240, 237, 232, 0.03);
  --color-card-hover:    rgba(240, 237, 232, 0.06);

  /* ── TEXT ─────────────────────────────────────────────── */
  --color-text:          #F0EDE8;   /* primary cream text  */
  --color-text-muted:    #858481;   /* secondary grey      */

  /* ── BRAND ACCENTS ────────────────────────────────────── */
  --color-accent:        #2D6A4F;   /* forest green        */
  --color-accent-hover:  #3D8A65;
  --color-accent-bright: #4AAD88;
  --color-gold:          #D4C5A0;   /* founding gold       */
  --color-gold-faded:    #85848160;

  /* ── BORDERS ──────────────────────────────────────────── */
  --color-border:        rgba(212, 197, 160, 0.08);
  --color-border-hover:  rgba(212, 197, 160, 0.15);

  /* ── VANTAGE TYPE (personality dimensions) ────────────── */
  --color-vt-connection: #F43F5E;   /* rose    */
  --color-vt-structure:  #3B82F6;   /* blue    */
  --color-vt-conviction: #F97316;   /* orange  */
  --color-vt-discovery:  #10B981;   /* emerald */
  --color-vt-meaning:    #8B5CF6;   /* violet  */

  /* ── SEMANTIC ─────────────────────────────────────────── */
  --color-success:       var(--color-accent-bright);
  --color-warning:       #F59E0B;
  --color-danger:        #EF4444;
  --color-info:          #3B82F6;

  /* ── TYPEFACES ────────────────────────────────────────── */
  --font-sans:  'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:  'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── TYPE SCALE ───────────────────────────────────────── */
  --fs-xs:   0.7rem;    /* 11.2px — mono tags              */
  --fs-sm:   0.875rem;  /* 14px   — body small / UI chrome */
  --fs-base: 1rem;      /* 16px   — body                   */
  --fs-lg:   1.125rem;  /* 18px   — lead paragraph         */
  --fs-xl:   1.25rem;   /* 20px                            */
  --fs-2xl:  1.5rem;    /* 24px   — h4                     */
  --fs-3xl:  1.875rem;  /* 30px   — h3                     */
  --fs-4xl:  2.25rem;   /* 36px   — h2                     */
  --fs-5xl:  3rem;      /* 48px   — h1 / hero small        */
  --fs-6xl:  3.75rem;   /* 60px   — hero                   */
  --fs-7xl:  4.5rem;    /* 72px   — display                */

  /* ── TYPE WEIGHTS ─────────────────────────────────────── */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ── LINE HEIGHTS ─────────────────────────────────────── */
  --lh-tight:   1.1;    /* display headlines               */
  --lh-snug:    1.25;   /* section headings                */
  --lh-normal:  1.5;    /* body                            */
  --lh-relaxed: 1.65;   /* long-form copy                  */

  /* ── LETTER SPACING ───────────────────────────────────── */
  --ls-tight:  -0.02em;  /* bold display                    */
  --ls-normal:  0;
  --ls-mono:   0.05em;   /* uppercase mono tags             */
  --ls-eyebrow: 0.2em;   /* gold eyebrow labels             */
  --ls-hero-eyebrow: 0.3em; /* intro + hero                 */

  /* ── RADII ────────────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   8px;    /* buttons, inputs                 */
  --radius-lg:  12px;    /* cards                           */
  --radius-xl:  16px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ── SPACING SCALE (4px 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;

  /* ── ELEVATION ────────────────────────────────────────── */
  /* Vantage rarely uses drop shadows; instead relies on
     subtle glass-cards + hover glow. These are the two
     primary glow tokens. */
  --glow-green: 0 0 30px rgba(45, 106, 79, 0.08);
  --glow-gold:  0 0 30px rgba(212, 197, 160, 0.05);
  --glow-btn:   0 4px 20px rgba(45, 106, 79, 0.25);

  /* ── MOTION ───────────────────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   200ms;
  --dur-slow:   300ms;
  --dur-reveal: 600ms;  /* fade-in / slide-up              */
}

/* ============================================================
   SEMANTIC TYPOGRAPHY
   ------------------------------------------------------------
   Pair with `font-family: var(--font-sans)` on body. These
   give you sensible default type without reaching for utility
   classes — useful inside mocks and prototypes.
   ============================================================ */

.vt-display {
  font-family: var(--font-sans);
  font-size: clamp(3rem, 6vw, var(--fs-7xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.vt-h1, h1.vt {
  font-family: var(--font-sans);
  font-size: clamp(2.25rem, 4vw, var(--fs-6xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.vt-h2, h2.vt {
  font-family: var(--font-sans);
  font-size: clamp(1.875rem, 3vw, var(--fs-5xl));
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

.vt-h3, h3.vt {
  font-family: var(--font-sans);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.vt-h4, h4.vt {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.vt-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
}

.vt-body, p.vt {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
}

.vt-small {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

/* Gold eyebrow — the most important supporting type token
   in Vantage. Appears above nearly every section heading. */
.vt-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-gold);
}

/* Mono caption — used for timestamps, labels, counters. */
.vt-caption {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-mono);
  color: var(--color-text-muted);
}

.vt-code, code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: rgba(240, 237, 232, 0.06);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}