/* Nashley Design System — colors_and_type.css
 * Editorial. Considered. Slightly austere.
 * "The default state of the brand is empty space."
 */

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

:root {
  /* ---------- COLORS ---------- */
  /* Six colors. Constrained on purpose. */
  --ink:    #0F1F2E;  /* Primary text & structure (~80% of all type) */
  --slate:  #3B4A5A;  /* Secondary text, captions, metadata */
  --signal: #C44536;  /* Accent — ONE element per surface */
  --cream:  #E8E2D6;  /* Warm fill — tables, callouts, banners */
  --bone:   #FBF9F4;  /* Default page background */
  --paper:  #FFFFFF;  /* Pure white — only when contrast demands it */

  /* Semantic foreground / background */
  --fg-primary:   var(--ink);
  --fg-secondary: var(--slate);
  --fg-accent:    var(--signal);
  --fg-inverse:   var(--bone);

  --bg-page:    var(--bone);
  --bg-warm:    var(--cream);
  --bg-inverse: var(--ink);
  --bg-stark:   var(--paper);

  --rule:       rgba(15, 31, 46, 0.12); /* Ink @ 12% — for hairlines */
  --rule-soft:  rgba(15, 31, 46, 0.06);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Fraunces', 'Tiempos Headline', Georgia, 'Iowan Old Style', serif;
  --font-body:    'Inter', 'Söhne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  /* ---------- TYPE SCALE ---------- */
  /* Editorial restraint: headlines 1.8–2.4× body. Don't go bigger. */
  --t-display-xl: 64px;   /* Hero pull quote / banner headline */
  --t-display-l:  48px;   /* H1 — page title */
  --t-display-m:  36px;   /* H2 — section title */
  --t-display-s:  28px;   /* H3 */
  --t-body-l:     20px;   /* Lede paragraph */
  --t-body:       17px;   /* Body — generous line height */
  --t-body-s:     15px;   /* Secondary body */
  --t-caption:    13px;   /* Caption / metadata */
  --t-label:      12px;   /* Small caps label */

  /* ---------- LINE HEIGHTS ---------- */
  --lh-tight:    1.1;     /* Display headlines */
  --lh-snug:     1.25;    /* Sub-headlines */
  --lh-normal:   1.55;    /* Min for body */
  --lh-relaxed:  1.65;    /* Generous editorial body */

  /* ---------- TRACKING ---------- */
  --tr-display: -0.018em; /* Tight on serif display (-1 to -2%) */
  --tr-body:    0;
  --tr-label:   0.08em;   /* Wide on small all-caps labels (+8%) */

  /* ---------- SPACING (8pt baseline, generous) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------- BORDERS / RADII ---------- */
  /* Editorial brands use minimal radii — paper, not plastic. */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;     /* Use sparingly */

  --border-hair: 1px solid var(--rule);
  --border-rule: 1px solid var(--ink);

  /* ---------- ELEVATION ---------- */
  /* Magazines don't have shadows. Use them almost never. */
  --shadow-none: none;
  --shadow-page: 0 1px 0 rgba(15, 31, 46, 0.04);  /* The barest separation */

  /* ---------- LAYOUT ---------- */
  --measure: 64ch;        /* Editorial reading measure */
  --col-narrow: 640px;
  --col-text:   720px;
  --col-wide:   1080px;
}

/* =================================================================
   SEMANTIC ELEMENTS — the brand's voice rendered as defaults
   ================================================================= */

html, body {
  background: var(--bg-page);
  color: var(--fg-primary);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- DISPLAY / HEADLINES (serif) ---------- */
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--fg-primary);
  letter-spacing: var(--tr-display);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

h1, .h1 {
  font-size: var(--t-display-l);
  font-weight: 600;
}

h2, .h2 {
  font-size: var(--t-display-m);
  font-weight: 600;
}

h3, .h3 {
  font-size: var(--t-display-s);
  font-weight: 600;
  line-height: var(--lh-snug);
}

.hero {
  font-family: var(--font-display);
  font-size: var(--t-display-xl);
  font-weight: 700;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-tight);
}

/* ---------- BODY ---------- */
p, .p {
  font-size: var(--t-body);
  line-height: var(--lh-relaxed);
  max-width: var(--measure);
  text-wrap: pretty;
}

.lede {
  font-size: var(--t-body-l);
  line-height: var(--lh-relaxed);
  color: var(--fg-primary);
}

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

/* ---------- LABEL — tracked-out small caps ---------- */
.label, .eyebrow {
  font-family: var(--font-body);
  font-size: var(--t-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--fg-secondary);
}

/* ---------- MONO — for numbers, data, code ---------- */
code, .mono, .data {
  font-family: var(--font-mono);
  font-size: 0.94em;
  font-feature-settings: 'tnum' 1;
}

.metric {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--fg-accent);
}

/* ---------- LINKS ---------- */
a {
  color: var(--fg-primary);
  text-decoration: underline;
  text-decoration-color: var(--fg-accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: opacity 120ms ease;
}
a:hover { opacity: 0.7; }

/* ---------- RULE / DIVIDER ---------- */
hr {
  border: 0;
  border-top: var(--border-hair);
  margin: var(--sp-6) 0;
}

/* ---------- THE SIGNAL PERIOD ---------- */
.signal-dot { color: var(--fg-accent); }
.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: lowercase;
}
.wordmark::after {
  content: '.';
  color: var(--fg-accent);
}