/* ============================================================
   Labha Alcobev · Colors & Type
   ------------------------------------------------------------
   Two primaries (Royal Blue + Rust Orange), paper neutrals,
   Fraunces display + Roboto sans + Roboto Mono.
   ============================================================ */


:root {
  /* ---------- PRIMARY ---------- */
  --royal-blue: #0055B8;
  --rust-orange: #DA6118;
  --ink: #0A0A0A;
  --paper: #FAF7F2;

  /* ---------- SECONDARY ---------- */
  --blue-mid: #819FCE;
  --blue-light: #BBC9E7;
  --orange-mid: #EDAB82;
  --orange-light: #F6D3BA;
  --sand: #857550;
  --sand-mid: #D9C7AB;
  --sand-light: #EAE1D1;
  --gold: #857550; /* Pantone 871C — metallic in print */

  /* ---------- SEMANTIC FG/BG ---------- */
  --fg1: var(--ink);
  --fg2: rgba(10, 10, 10, 0.75);
  --fg3: rgba(10, 10, 10, 0.55);
  --fg4: rgba(10, 10, 10, 0.30);
  --bg1: var(--paper);
  --bg2: #F2EDE4;
  --bg-invert: var(--royal-blue);
  --accent: var(--rust-orange);

  /* ---------- RULES / BORDERS ---------- */
  --rule: 1px solid rgba(10, 10, 10, 0.12);
  --rule-strong: 1px solid rgba(10, 10, 10, 0.85);
  --rule-accent: 1px solid var(--rust-orange);

  /* ---------- TYPEFACES ---------- */
  --display: 'Fraunces', 'Times New Roman', serif;
  --sans: 'Roboto', system-ui, -apple-system, sans-serif;
  --mono: 'Roboto Mono', ui-monospace, monospace;

  /* ---------- TYPE SCALE ---------- */
  --fs-display: clamp(64px, 9vw, 140px);
  --fs-h1: 48px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-caption: 11px;

  --lh-tight: 0.92;
  --lh-snug: 1.05;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --tracking-tight: -0.03em;
  --tracking-normal: 0;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.15em;
  --tracking-widest: 0.25em;

  /* ---------- SPACING / RHYTHM ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 60px;
  --space-8: 80px;
  --space-9: 120px;
  --gutter: 32px;
  --max: 1440px;

  /* ---------- SHADOWS ---------- */
  /* Soft, paper-on-paper shadows — tinted with blue */
  --shadow-sm: 0 2px 6px -2px rgba(0, 40, 120, 0.08);
  --shadow-md: 0 8px 20px -6px rgba(0, 40, 120, 0.12), 0 2px 6px -2px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 20px 40px -12px rgba(0, 40, 120, 0.18), 0 4px 12px -4px rgba(0, 0, 0, 0.08);

  /* ---------- RADII ---------- */
  /* The brand is editorial — corners are mostly sharp. */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;

  /* ---------- MOTION ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.4s;
  --dur-slow: 0.9s;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */

.display {
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: "opsz" 144;
}
.display em { font-style: italic; font-weight: 400; color: var(--royal-blue); }
.display .amp { font-style: italic; color: var(--rust-orange); font-weight: 300; }

h1, .h1 {
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
}
h1 em, .h1 em { font-style: italic; color: var(--royal-blue); }

h2, .h2 {
  font-family: var(--display);
  font-weight: 300;
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h2 em, .h2 em { font-style: italic; color: var(--royal-blue); }

h3, .h3 {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: 1.3;
}

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

.lede {
  font-family: var(--display);
  font-weight: 300;
  font-size: 22px;
  line-height: 1.4;
  color: var(--fg2);
}

.caption, .mono {
  font-family: var(--mono);
  font-weight: 400;
  font-size: var(--fs-caption);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  line-height: 1.8;
  color: var(--fg3);
}

.eyebrow {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--rust-orange);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: '';
  width: 32px;
  height: 1px;
  background: currentColor;
}

code, pre, .code {
  font-family: var(--mono);
  font-size: 13px;
}

a {
  color: var(--royal-blue);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast);
}
a:hover { color: var(--rust-orange); }