/* ============================================================
   Prosphère — Colors & Type Foundations
   A minimalist black & white system with a single accent.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* ---------- Color — Neutrals ---------- */
  --ink:        #0A0A0A;   /* fg primary, near-black with slight warmth */
  --ink-2:      #1C1C1C;   /* fg secondary on light bg */
  --graphite:   #3A3A3A;   /* fg tertiary, captions */
  --slate:      #6B6B6B;   /* muted text, borders-on-dark */
  --silver:     #B5B5B5;   /* hairlines, disabled */
  --mist:       #E5E5E5;   /* dividers on light */
  --fog:        #F2F2F2;   /* subtle surface */
  --paper:      #FAFAFA;   /* canvas / page bg */
  --white:      #FFFFFF;

  /* ---------- Color — Accent (single warm spark) ---------- */
  /* Used sparingly: link underlines, selection, focus ring,
     hover ink-fills. Chosen as a warm cream so the whole
     system reads as B&W with a single human breath. */
  --ember:      #E8E0D2;   /* soft cream — "humain" warmth */
  --ember-deep: #C7B89E;   /* hover/pressed cream */

  /* ---------- Semantic FG / BG ---------- */
  --fg-1: var(--ink);
  --fg-2: var(--graphite);
  --fg-3: var(--slate);
  --fg-on-dark: var(--white);

  --bg-1: var(--white);     /* primary surface */
  --bg-2: var(--paper);     /* page */
  --bg-3: var(--fog);       /* subtle card */
  --bg-inverse: var(--ink); /* dark surface */

  --border-1: var(--mist);  /* default hairline */
  --border-2: var(--silver);/* stronger */
  --border-strong: var(--ink);

  /* ---------- Type families ---------- */
  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale ---------- */
  --fs-display: clamp(56px, 8vw, 112px);
  --fs-h1:      clamp(40px, 5vw, 64px);
  --fs-h2:      clamp(28px, 3.5vw, 40px);
  --fs-h3:      24px;
  --fs-h4:      18px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-micro:   12px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-caps:   0.18em;

  /* ---------- Spacing (4px base) ---------- */
  --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;

  /* ---------- Radii (sparing) ---------- */
  --r-0: 0px;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;

  /* ---------- Shadows (almost none — use borders) ---------- */
  --shadow-0: none;
  --shadow-1: 0 1px 0 rgba(10,10,10,0.04);
  --shadow-2: 0 8px 24px -8px rgba(10,10,10,0.12);
  --shadow-lift: 0 24px 60px -20px rgba(10,10,10,0.25);

  /* ---------- Motion ---------- */
  --ease-out:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   420ms;
  --dur-cinema: 800ms;
}

/* ============================================================
   Semantic element styles
   Apply these as classes (.h1, .body, …) or use the variables
   directly inside components.
   ============================================================ */

html, body {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ink); color: var(--white); }

.display, h1.display {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: "opsz" 144;
}

.h1, h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: "opsz" 96;
}

.h2, h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  font-variation-settings: "opsz" 48;
}

.h3, h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

.h4, h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
}

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

.lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: 20px;
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.small, small {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
}

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

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-2);
}

.serif-quote {
  font-family: var(--font-display);
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--fog);
  padding: 2px 6px;
  border-radius: var(--r-1);
}

a {
  color: inherit;
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
  transition: background-size var(--dur-base) var(--ease-out);
}
a:hover {
  background-size: 100% 100%;
  color: var(--white);
}
a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
}

hr { border: 0; border-top: 1px solid var(--border-1); margin: var(--s-6) 0; }