/* =========================================================================
   Delhi.fyi — Colors & Type
   80% Mono + 20% Red. Editorial, not corporate.
   ========================================================================= */

/* -------- Fonts --------
   Source fonts (Hinge pack) were not uploaded. Using Google Fonts substitutes:
   - Display serif  : Fraunces (substitutes for editorial serif like Tiempos)
   - UI sans        : DM Sans  (substitutes for a utilitarian, friendly sans)
   - Mono           : JetBrains Mono
   Swap these in fonts/ if the real faces become available.
*/
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=DM+Sans:opsz,wght@9..40,300..800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ——— Color: Core mono + red ——————————————————————— */
  --ink:        #0A0A0A;   /* Ink — near-black, primary FG */
  --paper:     #FFFFFF;    /* Paper — pure white */
  --paper-alt: #F7F5F2;    /* Paper Alt — warm off-white, editorial cream */
  --red:       #E11B22;    /* Red — reserved for CTAs, pins, active states */

  /* ——— Color: Neutrals (scaled from Ink) ——————————————— */
  --ink-95: #1A1A1A;
  --ink-80: #2E2E2E;
  --ink-60: #5C5C5C;
  --ink-40: #8A8A8A;
  --ink-20: #C7C7C7;
  --ink-10: #E3E3E3;
  --ink-05: #EFEDEA;  /* hairline on cream */

  /* ——— Color: Red family (sparingly) ————————————————— */
  --red-hover:  #C6151C;   /* darker on hover */
  --red-press:  #A61117;
  --red-tint:   #FBE8E9;   /* only for pin halos, toast bg — rare */

  /* ——— Semantic foreground / background ——————————————— */
  --fg:         var(--ink);
  --fg-muted:   var(--ink-60);
  --fg-subtle:  var(--ink-40);
  --fg-inverse: var(--paper);
  --bg:         var(--paper-alt);       /* default page bg is cream */
  --bg-paper:   var(--paper);           /* cards/sheets */
  --bg-ink:     var(--ink);             /* dark sections, section headers */
  --accent:     var(--red);
  --border:     var(--ink-10);
  --border-strong: var(--ink-20);
  --hairline:   var(--ink-05);

  /* ——— Type: families ————————————————————————————— */
  --font-display: 'Fraunces', 'Tiempos Headline', Georgia, 'Times New Roman', serif;
  --font-serif:   'Fraunces', 'Tiempos Text', Georgia, serif;
  --font-sans:    'DM Sans', 'Modern Era', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ——— Type: weights ——————————————————————————————— */
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* ——— Type: tracking ——————————————————————————————— */
  --track-tight: -0.02em;
  --track-base: 0;
  --track-wide: 0.02em;
  --track-eyebrow: 0.14em;  /* for UPPERCASE EYEBROWS */

  /* ——— Spacing scale (4pt grid) ———————————————————— */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ——— Radii — mostly none. Editorial is square. ——— */
  --r-0:  0px;
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* ——— Shadows — almost never. Keep flat. ————————— */
  --shadow-sheet: 0 1px 2px rgba(10,10,10,0.04), 0 8px 24px rgba(10,10,10,0.06);
  --shadow-pop:   0 12px 40px rgba(10,10,10,0.12);
  --shadow-pin:   0 2px 6px rgba(225,27,34,0.35);

  /* ——— Motion ——————————————————————————————————— */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:  cubic-bezier(0.6, 0, 0.8, 0.3);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* =========================================================================
   Base elements — the defaults
   ========================================================================= */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  font-feature-settings: "ss01", "kern";
}

/* ——— Headings: editorial serif ——— */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-variation-settings: "opsz" 144, "SOFT" 20;
}
h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 72;
}
h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

/* ——— Body copy ——— */
p, .body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--fg);
}
.body-lg {
  font-size: 18px;
  line-height: 1.5;
}
.body-sm {
  font-size: 14px;
  line-height: 1.45;
}

/* ——— Editorial lead paragraph (magazine intro) ——— */
.lead {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  color: var(--fg);
}

/* ——— Eyebrow — ALL CAPS tracked label above a headline ——— */
.eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--fg-muted);
}
.eyebrow-red { color: var(--red); }

/* ——— Meta / byline ——— */
.meta {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--fg-muted);
  letter-spacing: 0.005em;
}

/* ——— Pullquote ——— */
.pullquote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  font-style: italic;
}

/* ——— Mono ——— */
.mono, code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

/* ——— Links — underlined, red only when active ——— */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--ink-60); }
a.cta { color: var(--red); text-decoration: none; font-weight: 600; }
a.cta:hover { color: var(--red-hover); }

/* ——— Rules ——— */
hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-8) 0;
}
hr.red { border-color: var(--red); border-top-width: 2px; }

/* ——— Selection ——— */
::selection { background: var(--red); color: var(--paper); }