/* ============================================================
   Recall — Design Tokens
   Single source of truth for color, type, spacing, radii, motion.
   Drop this file into any HTML page:
       <link rel="stylesheet" href="colors_and_type.css">
   Then use vars (e.g. var(--fg), var(--surface)) everywhere.
   ============================================================ */

/* ---------- Webfonts (self-hosted) ----------
   Geist supplied as 3 static heavy weights: Bold/ExtraBold/Black.
   Inter supplied as a variable .woff2. */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Geist-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/Geist-ExtraBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/Geist-Black.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/InterVariable.woff2') format('woff2-variations'),
       url('../fonts/InterVariable.woff2') format('woff2');
}

@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/GeistMono-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/GeistMono-Medium.woff2') format('woff2');
}

/* All brand fonts are now self-hosted. */

:root {
  /* ============ COLOR ============ */
  --bg:           #080808;
  --surface:      #111111;
  --surface-2:    #161616;
  --surface-3:    #1d1d1d;
  --surface-4:    #252525;

  --border:        #222222;
  --border-strong: #2e2e2e;

  --fg:   #ffffff;
  --fg-2: #a3a3a3;
  --fg-3: #666666;
  --fg-4: #3a3a3a;

  /* Coral accent — warm gradient */
  --accent:             #FF6B6B;
  --accent-warm:        #FF8C42;
  --accent-gradient:    linear-gradient(135deg, #FF8C42 0%, #FF6B6B 50%, #FF4D4D 100%);
  --accent-glow:        rgba(255, 107, 107, 0.15);
  --accent-glow-strong: rgba(255, 107, 107, 0.3);

  /* Magenta–purple accent — cool gradient */
  --accent-cool:          #FF2D8B;
  --accent-cool-2:        #9B3FD4;
  --accent-cool-gradient: linear-gradient(135deg, #FF2D8B 0%, #C438A8 50%, #9B3FD4 100%);
  --accent-cool-glow:     rgba(255, 45, 139, 0.15);

  /* The brand's single signature: a white glow. Used as box-shadow / drop-shadow. */
  --glow-soft:   0 0 60px rgba(255,255,255,0.18);
  --glow-medium: 0 0 80px rgba(255,255,255,0.30);
  --glow-strong: 0 0 120px rgba(255,255,255,0.45);
  --glow-hover:  0 0 24px rgba(255,255,255,0.35);

  /* Status - only ever as backgrounds for inline pills. */
  --tint-danger:  #1a0808;
  --tint-warn:    #1a1308;
  --tint-success: #081a0c;

  /* ============ TYPE ============ */
  --font-display: 'Geist', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Type scale - desktop. Use clamp() in components for fluid behavior. */
  --t-hero:    128px;  /* hero, marketing only */
  --t-d1:       96px;
  --t-d2:       72px;
  --t-h1:       56px;
  --t-h2:       40px;
  --t-h3:       28px;
  --t-h4:       20px;
  --t-body:     16px;
  --t-body-lg:  18px;
  --t-small:    14px;
  --t-caption:  12px;

  /* Weights */
  --w-light:    300;
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-black:    800;

  /* Line heights */
  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.65;

  /* Tracking */
  --tr-tightest: -0.04em;
  --tr-tight:    -0.03em;
  --tr-snug:     -0.02em;
  --tr-normal:   -0.011em;
  --tr-mono:     -0.005em;
  --tr-caps:      0.12em;   /* eyebrow / label uppercase */

  /* ============ SPACING ============ */
  --s-0:    0px;
  --s-1:    4px;
  --s-2:    8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   24px;
  --s-6:   32px;
  --s-7:   48px;
  --s-8:   64px;
  --s-9:   96px;
  --s-10: 128px;
  --s-11: 160px;
  --s-12: 200px;

  /* ============ RADII ============ */
  --radius-sm:    6px;
  --radius:      10px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;

  /* ============ MOTION ============ */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-1:  120ms;
  --dur-2:  150ms;
  --dur-3:  240ms;
  --dur-4:  400ms;
  --dur-5:  500ms;
  --dur-6:  800ms;

  /* ============ LAYOUT ============ */
  --container:    1200px;
  --container-sm:  720px;
  --nav-h:          64px;
  --sidebar-w:     240px;
}

/* ============ BASE ============ */

* { box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--tr-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}

::selection {
  background: rgba(255,255,255,0.85);
  color: #000;
}

/* ============ SEMANTIC TYPE ============
   Use these classes (or wrap with the same CSS in a component).
   ===================================== */

.t-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  font-weight: var(--w-medium);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--fg-3);
}

.t-hero, h1.hero {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, var(--t-hero));
  font-weight: var(--w-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tightest);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

.t-display, h1 {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, var(--t-d1));
  font-weight: var(--w-black);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

.t-h1, h2 {
  font-family: var(--font-display);
  font-size: var(--t-h1);
  font-weight: var(--w-black);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
  margin: 0;
  text-wrap: balance;
}

.t-h2, h3 {
  font-family: var(--font-display);
  font-size: var(--t-h2);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
  color: var(--fg);
  margin: 0;
}

.t-h3, h4 {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: var(--w-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg);
  margin: 0;
}

.t-h4, h5 {
  font-family: var(--font-body);
  font-size: var(--t-h4);
  font-weight: var(--w-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-snug);
  color: var(--fg);
  margin: 0;
}

.t-body, p {
  font-family: var(--font-body);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-loose);
  letter-spacing: var(--tr-normal);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

.t-body-lg {
  font-size: var(--t-body-lg);
  line-height: var(--lh-loose);
  color: var(--fg-2);
}

.t-small {
  font-size: var(--t-small);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.t-caption {
  font-size: var(--t-caption);
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

.t-mono {
  font-family: var(--font-mono);
  letter-spacing: var(--tr-mono);
  font-feature-settings: 'ss01', 'cv11';
}

.t-numeric {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tr-mono);
}

/* ============ UTILITY: glow ============ */
.glow-mark { filter: drop-shadow(0 0 60px rgba(255,255,255,0.45)); }
.glow-soft   { box-shadow: var(--glow-soft); }
.glow-medium { box-shadow: var(--glow-medium); }
.glow-strong { box-shadow: var(--glow-strong); }

/* ============ FOCUS ============ */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--fg);
}