/* =========================================================
   Galandr AI — Design Tokens
   Dark-mode dominance, premium tech, editorial whitespace.
   Use accent SPARINGLY (CTA, focus, hover, single hero glow).
   ========================================================= */

/* Fonts: Geist family (Google Fonts substitute for PP Neue Montreal/Inter/JetBrains Mono) */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  /* ---------- COLORS ---------- */

  /* Background scale (near-black) */
  --bg-base:        #0A0A0B;   /* page background */
  --bg-elevated:    #111114;   /* slight lift */
  --surface:        #16161A;   /* cards, panels */
  --surface-hover:  #1C1C22;
  --surface-press:  #202028;

  /* Text */
  --text-primary:   #F5F5F7;
  --text-secondary: #A0A0A8;
  --text-tertiary:  #6B6B74;
  --text-disabled:  #3A3A40;

  /* Accent — Galandr red (use sparingly) */
  --accent:         #F7133F;
  --accent-hover:   #FF3D5F;
  --accent-deep:    #C00D2F;
  --accent-glow:    rgba(247, 19, 63, 0.35);

  /* Borders & dividers (hairline) */
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border:         rgba(255, 255, 255, 0.08);
  --border-strong:  rgba(255, 255, 255, 0.14);

  /* Focus */
  --focus-ring:     var(--accent);

  /* Semantic surfaces */
  --overlay-blur:   rgba(10, 10, 11, 0.6);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display:   'Geist', 'PP Neue Montreal', system-ui, sans-serif;
  --font-body:      'Geist', 'Inter', system-ui, sans-serif;
  --font-mono:      'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;

  /* Type scale — display can go big (clamp 64–128px per brief) */
  --fs-display-xl:  clamp(64px, 8vw, 128px);
  --fs-display-lg:  clamp(48px, 6vw, 96px);
  --fs-display-md:  clamp(40px, 4.5vw, 72px);
  --fs-h1:          clamp(40px, 4vw, 64px);
  --fs-h2:          clamp(32px, 3vw, 48px);
  --fs-h3:          clamp(24px, 2vw, 32px);
  --fs-body-lg:     20px;
  --fs-body:        17px;
  --fs-body-sm:     15px;
  --fs-caption:     13px;
  --fs-eyebrow:     12px;   /* mono uppercase eyebrow texts */

  /* Line heights */
  --lh-display:     0.96;
  --lh-heading:     1.08;
  --lh-body:        1.55;
  --lh-tight:       1.2;

  /* Letter spacing */
  --tracking-display: -0.03em;
  --tracking-heading: -0.02em;
  --tracking-body:    0;
  --tracking-mono:    0;
  --tracking-eyebrow: 0.12em;   /* generous for UPPERCASE mono labels */

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

  /* ---------- SPACING ---------- */
  /* 4px grid */
  --space-0:   0;
  --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;
  --space-11:  192px;   /* generous editorial whitespace */
  --space-12:  256px;

  /* ---------- LAYOUT ---------- */
  --container-max: 1440px;
  --gutter:        32px;
  --gutter-mobile: 24px;

  /* ---------- RADII ---------- */
  --radius-sm:  4px;
  --radius:     6px;     /* default */
  --radius-md:  8px;
  --radius-lg:  12px;    /* larger cards */
  --radius-xl:  20px;
  --radius-pill: 999px;  /* chips, avatars */

  /* ---------- SHADOW & GLOW ---------- */
  /* In dark mode we prefer GLOW over drop-shadow */
  --glow-accent:    0 0 40px var(--accent-glow);
  --glow-accent-sm: 0 0 20px rgba(247, 19, 63, 0.25);
  --shadow-card:    inset 0 0 0 1px var(--border);  /* hairline inner border */
  --shadow-elev:    0 8px 32px rgba(0, 0, 0, 0.4);

  /* ---------- MOTION ---------- */
  --ease:          cubic-bezier(0.65, 0, 0.35, 1);   /* slow + decisive */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:      200ms;
  --dur:           400ms;
  --dur-slow:      800ms;
}

/* =========================================================
   BASE / RESET
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--accent);
  color: var(--text-primary);
}

/* =========================================================
   SEMANTIC ELEMENTS
   ========================================================= */
.display-xl, h1.display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  margin: 0;
}

.display-lg {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display-lg);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  margin: 0;
}

h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0;
}

h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tracking-heading);
  margin: 0;
}

h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-heading);
  margin: 0;
}

p {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-primary);
  margin: 0;
  text-wrap: pretty;
}

.body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); }
.body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body); color: var(--text-secondary); }
.caption { font-size: var(--fs-caption); color: var(--text-secondary); }

/* Eyebrow / numbered section labels — mono UPPERCASE with generous tracking */
.eyebrow, .mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-secondary);
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  letter-spacing: var(--tracking-mono);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--accent-hover); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}