/* ════════════════════════════════════════════════════════════════
   GHOST | Cleaning — Colors & Typography Tokens
   ────────────────────────────────────────────────────────────────
   Single source of truth for foundations. Import this before any
   component CSS.
   ════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ── PRIMARY COLORS (brand-doc names) ───────────────────────── */
  --ghost-obsidian:      #0A0E12;  /* Primary background */
  --ghost-graphite:      #151A21;  /* Cards, elevated surfaces */
  --ghost-smoke:         #1F2630;  /* Hover / nested / input bg  */
  --ghost-steel:         #4A90B8;  /* THE accent */
  --ghost-frost:         #8EC5E0;  /* Accent hover / highlights */
  --ghost-bone:          #F5F7FA;  /* Text primary */
  --ghost-mist:          #A8B3C1;  /* Text secondary */
  --ghost-shadow:        #6B7685;  /* Text tertiary / disabled */

  /* ── PRODUCTION COLORS (as shipped in ghosttheglass.com) ──────
     Slightly tuned from brand doc — use these in UI implementations
     to match the live site verbatim. */
  --bg:                  #0d0d0f;
  --surface:             #141518;
  --card:                #1a1b21;
  --border:              rgba(255,255,255,0.06);
  --white:               #eaecf0;
  --muted:               #6b7280;
  --accent:              #4a90b8;
  --accent-light:        #6eb8d6;
  --accent-bg:           rgba(74,144,184,0.08);
  --accent-border:       rgba(74,144,184,0.2);
  --pop:                 #c9f0ff;

  /* ── FUNCTIONAL COLORS ──────────────────────────────────────── */
  --success:             #5FB88F;  /* muted cool green */
  --warning:             #D4A85A;  /* amber — never yellow */
  --error:               #C86B6B;  /* desaturated red */

  /* ── SEMANTIC (recommended usage) ───────────────────────────── */
  --fg1: var(--white);        /* Primary text on dark */
  --fg2: var(--muted);        /* Secondary text */
  --fg3: var(--ghost-shadow); /* Tertiary / disabled */
  --bg1: var(--bg);           /* Page background */
  --bg2: var(--surface);      /* Elevated surface */
  --bg3: var(--card);         /* Nested card */
  --brand: var(--accent);
  --brand-soft: var(--accent-bg);
  --hairline: var(--border);

  /* ── TYPOGRAPHY — FAMILIES ──────────────────────────────────── */
  /* Per user: Poppins is the main font; Poppins Bold (700) / Black (900)
     is the display weight. Headlines should feel compressed and confident
     with tight negative letter-spacing. */
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-body:    'Poppins', system-ui, sans-serif;
  --font-label:   'Space Grotesk', ui-monospace, monospace;  /* eyebrows, numerics */
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;

  /* ── TYPE TOKENS (desktop) ──────────────────────────────────── */
  --fs-display-xl: clamp(3rem, 7.5vw, 6rem);    /* Hero h1  72-96px */
  --fs-display-l:  clamp(2.4rem, 5vw, 3.5rem);  /* 56px     Major headers */
  --fs-display-m:  clamp(2rem, 4vw, 2.5rem);    /* 40px     Subsection */
  --fs-heading-l:  2rem;                         /* 32px     Card titles */
  --fs-heading-m:  1.5rem;                       /* 24px     Sub-headings */
  --fs-heading-s:  1.125rem;                     /* 18px     Smallest heading */
  --fs-body-l:     1.125rem;                     /* 18px     Leads */
  --fs-body:       1rem;                         /* 16px     Default */
  --fs-body-s:     0.875rem;                     /* 14px     Captions */
  --fs-micro:      0.75rem;                      /* 12px     Eyebrow */

  --lh-display:    0.92;
  --lh-heading:    1.1;
  --lh-body:       1.6;

  --tracking-xtight: -0.03em;
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-loose:  0.05em;
  --tracking-eyebrow:0.18em;

  /* ── SPACING SCALE ──────────────────────────────────────────── */
  --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: 120px;
  --space-11: 160px;

  /* ── RADII ──────────────────────────────────────────────────── */
  --radius-sm:  6px;   /* buttons */
  --radius:    12px;   /* inputs, small cards */
  --radius-lg: 20px;   /* feature cards, modals */
  --radius-pill: 100px;

  /* ── ELEVATION / GLOW ──────────────────────────────────────── */
  --shadow-btn:   0 4px 20px rgba(74,144,184,0.25);
  --shadow-btn-hover: 0 6px 28px rgba(74,144,184,0.35);
  --glow-focus:   0 0 0 2px rgba(74,144,184,0.2), 0 0 0 4px rgba(74,144,184,0.08);

  /* ── MOTION ─────────────────────────────────────────────────── */
  --ease-glass: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro:  200ms;
  --dur-base:   400ms;
  --dur-slow:   600ms;

  /* ── LAYOUT ─────────────────────────────────────────────────── */
  --container:  1220px;
  --gutter:     24px;
}

/* ════════════════════════════════════════════════════════════════
   SEMANTIC TYPE CLASSES
   Apply these instead of raw font sizes.
   ════════════════════════════════════════════════════════════════ */

.t-eyebrow {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

.t-display-xl, h1.hero {
  font-family: var(--font-display);
  font-size: var(--fs-display-xl);
  font-weight: 900;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}

.t-display-l, h1 {
  font-family: var(--font-display);
  font-size: var(--fs-display-l);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}

.t-display-m, h2 {
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}

.t-heading-l, h3 {
  font-family: var(--font-display);
  font-size: var(--fs-heading-l);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: -0.015em;
  color: var(--fg1);
}

.t-heading-m, h4 {
  font-family: var(--font-display);
  font-size: var(--fs-heading-m);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--fg1);
}

.t-heading-s, h5 {
  font-family: var(--font-display);
  font-size: var(--fs-heading-s);
  font-weight: 600;
  color: var(--fg1);
}

.t-body-l {
  font-family: var(--font-body);
  font-size: var(--fs-body-l);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--fg2);
}

.t-body, p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: var(--lh-body);
  color: var(--fg2);
}

.t-body-s {
  font-family: var(--font-body);
  font-size: var(--fs-body-s);
  font-weight: 400;
  line-height: 1.55;
  color: var(--fg2);
}

.t-micro {
  font-family: var(--font-label);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-loose);
  text-transform: uppercase;
  color: var(--fg2);
}

.t-numeric {
  font-family: var(--font-label);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.t-mono {
  font-family: var(--font-mono);
}

/* Signature tagline pattern: eyebrow above a big headline */
.eyebrow-steel { color: var(--accent); }

/* The sacred pipe — always steel blue when in color */
.brand-pipe { color: var(--accent); font-weight: 500; }