/* ============================================================================
   Rýni — Design Tokens
   colors_and_type.css

   This is the single source of truth for all visual primitives in the
   Rýni design system. Import it once at the root of any page or kit:

     <link rel="stylesheet" href="/colors_and_type.css">

   Three layers:
     1. Webfont imports (Google Fonts — see substitution note in README)
     2. Primitive tokens (color scales, raw type sizes, raw spacing)
     3. Semantic tokens (fg, bg, border, h1/h2/body, etc.) + base styles
   ============================================================================ */

/* ─────────────────────────────────────────────────────────────────────────────
   1. Fonts
   ───────────────────────────────────────────────────────────────────────────── */

/* Display: Source Serif 4 — classical, journal-grade. Replaces Instrument Serif
   for a more institutional read (less editorial-quirk, more quarterly-report). */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,400;1,8..60,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ─────────────────────────────────────────────────────────────────────────────
   2. Primitive tokens
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* ---------- Color: Ink (the "black") — deeper, more institutional navy ---------- */
  --ink:          #0A1B2E;   /* primary type, primary buttons, full-bleed inverse */
  --ink-hover:    #050F1C;   /* primary button hover */
  --ink-soft:     #1A2A3F;   /* secondary ink */
  --ink-deep:     #051124;   /* used for full-bleed sections that need extra weight */

  /* ---------- Color: Paper (the "white") — cleaner, distinctly white ---------- */
  --paper:        #F8F7F2;   /* page background — off-white, the lightest warmth */
  --paper-pure:   #FDFCFA;   /* slight lift, document surfaces, modal */
  --paper-deep:   #EEEDE6;   /* recessed surface, table zebra */

  /* ---------- Color: Fog (cool grays) ---------- */
  --fog-1:        #EDEAE3;   /* hover fills, subtle dividers */
  --fog-2:        #D9D5CC;   /* default border / hairline */
  --fog-3:        #BFBAAE;   /* hover border, disabled stroke */
  --fog-4:        #8A8578;   /* tertiary type, captions */
  --fog-5:        #5A6470;   /* secondary type */

  /* ---------- Color: Frost (cool blue accent — deeper, more bond-paper) ---------- */
  --frost:        #1F4E6E;
  --frost-hover:  #163C57;
  --frost-soft:   #DDE7EE;   /* tint for selected rows, focus backgrounds */
  --frost-ring:   rgba(31, 78, 110, 0.30);

  /* ---------- Color: Brass (gold rule — institutional accent) ---------- */
  /* Used VERY sparingly — letterhead rules, seal accents, certificate edges.
     Never as a fill, never as a button background. Hairlines only. */
  --brass:        #8A6D2E;
  --brass-soft:   #C4A668;
  --brass-pale:   #EAD9A8;

  /* ---------- Color: Signal (semantic) ---------- */
  --positive:        #2D5A3D;   /* deep moss — deltas up, success */
  --positive-soft:   #DDE8DD;
  --negative:        #7A2823;   /* oxblood / claret — deltas down, destructive */
  --negative-soft:   #ECD7D2;
  --warning:         #8A6D2E;   /* shares the brass tone — drafts, in-progress */
  --warning-soft:    #EDE0C3;

  /* ---------- Type: families ---------- */
  --font-display: 'Source Serif 4', 'GT Sectra', 'Tiempos Headline', 'Iowan Old Style', Georgia, serif;
  --font-body:    'Geist', 'Söhne', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', 'SF Mono', Menlo, monospace;

  /* ---------- Type: raw sizes (modular ~1.25 scale, rounded for clarity) ---------- */
  --t-12: 12px;     /* caption / micro */
  --t-13: 13px;     /* small UI */
  --t-14: 14px;     /* secondary body, table cells */
  --t-16: 16px;     /* body */
  --t-18: 18px;     /* large body, lead-in */
  --t-20: 20px;     /* h5 */
  --t-24: 24px;     /* h4 */
  --t-32: 32px;     /* h3 */
  --t-44: 44px;     /* h2 */
  --t-64: 64px;     /* h1 */
  --t-96: 96px;     /* display */

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

  /* ---------- Type: line-heights ---------- */
  --lh-tight:   1.05;   /* display */
  --lh-snug:    1.18;   /* large heads */
  --lh-normal:  1.4;    /* UI */
  --lh-relaxed: 1.55;   /* body */
  --lh-loose:   1.7;    /* long-form prose */

  /* ---------- Type: tracking ---------- */
  --tr-display: -0.015em; /* big serif heads — Source Serif sets tighter than Instrument */
  --tr-head:    -0.005em;
  --tr-body:     0em;
  --tr-eyebrow:  0.14em;  /* uppercase eyebrows / section markers */
  --tr-button:   0.01em;

  /* ---------- Spacing (4-pt base) ---------- */
  --s-0:   0px;
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-8:  32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-14: 56px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;
  --s-40: 160px;

  /* ---------- Radii ---------- */
  --r-0:   0px;      /* full-bleed, table cells, image frames */
  --r-1:   2px;      /* chips, tags */
  --r-2:   4px;      /* buttons, inputs, cards (default) */
  --r-3:   6px;      /* larger panels */
  /* No pill radius. Intentional. */

  /* ---------- Borders ---------- */
  --bw-hair:    1px;
  --bw-thick:   2px;
  --border:     1px solid var(--fog-2);
  --border-strong: 1px solid var(--fog-3);
  --border-ink:    1px solid var(--ink);

  /* ---------- Shadows (used sparingly) ---------- */
  --shadow-1: 0 1px 2px rgba(11,26,43,0.04), 0 8px 24px rgba(11,26,43,0.08);
  --shadow-2: 0 12px 40px rgba(11,26,43,0.16);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --dur-micro:  120ms;
  --dur-state:  200ms;
  --dur-page:   360ms;

  /* ---------- Layout ---------- */
  --max-content: 1240px;
  --gutter:      80px;
  --col-gap:     24px;

  /* ---------- Z-index ---------- */
  --z-base:    1;
  --z-sticky:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
}

/* ─────────────────────────────────────────────────────────────────────────────
   3. Semantic tokens + base element styles
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* Surfaces */
  --bg-page:       var(--paper);
  --bg-surface:    var(--paper-pure);
  --bg-recess:     var(--paper-deep);
  --bg-inverse:    var(--ink);

  /* Foreground (type) */
  --fg-1:          var(--ink);        /* primary type */
  --fg-2:          var(--fog-5);      /* secondary type */
  --fg-3:          var(--fog-4);      /* tertiary / captions */
  --fg-onInverse:  var(--paper);      /* type on ink */
  --fg-link:       var(--frost);

  /* Borders */
  --bd-default:    var(--fog-2);
  --bd-hover:      var(--fog-3);
  --bd-focus:      var(--frost);
  --bd-inverse:    rgba(244, 241, 234, 0.16);
}

/* ---------- Base ---------- */
html {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--t-16);
  line-height: var(--lh-relaxed);
  font-feature-settings: "ss01", "cv11"; /* Geist stylistic tweaks where supported */
  font-variant-numeric: tabular-nums; /* numbers align in tables */
}

/* ---------- Type roles (semantic classes) ---------- */

.display,
h1.display {
  font-family: var(--font-display);
  font-weight: var(--w-medium);  /* Source Serif at display sizes wants a touch more weight */
  font-size: clamp(56px, 6.4vw, var(--t-96));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--fg-1);
  margin: 0;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: clamp(40px, 4.4vw, var(--t-64));
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-head);   /* tighter than display, less aggressive */
  margin: 0 0 var(--s-6);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  font-size: var(--t-44);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-head);
  margin: 0 0 var(--s-4);
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: var(--t-32);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-head);
  margin: 0 0 var(--s-4);
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: var(--t-24);
  line-height: var(--lh-normal);
  letter-spacing: var(--tr-head);
  margin: 0 0 var(--s-3);
}

h5, .h5 {
  font-family: var(--font-body);
  font-weight: var(--w-medium);
  font-size: var(--t-20);
  line-height: var(--lh-normal);
  margin: 0 0 var(--s-2);
}

p, .body {
  font-size: var(--t-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
  margin: 0 0 var(--s-4);
  text-wrap: pretty;
}

.lead {
  font-size: var(--t-20);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  max-width: 60ch;
}

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

.caption {
  font-size: var(--t-12);
  line-height: var(--lh-normal);
  color: var(--fg-3);
  letter-spacing: 0.01em;
}

.eyebrow {
  font-size: var(--t-12);
  font-weight: var(--w-medium);
  text-transform: uppercase;
  letter-spacing: var(--tr-eyebrow);
  color: var(--fg-2);
}

.serif        { font-family: var(--font-display); font-weight: var(--w-regular); }
.serif-italic { font-family: var(--font-display); font-style: italic; font-weight: var(--w-regular); }
.mono         { font-family: var(--font-mono); }

.figure {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ---------- Links ---------- */
a {
  color: var(--fg-link);
  text-decoration: none;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color var(--dur-micro) var(--ease-out);
}
a:hover { text-decoration: underline; }
a:focus-visible {
  outline: 2px solid var(--bd-focus);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* In-prose links on inverse surfaces */
.on-ink a { color: var(--paper); }

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

/* ---------- Horizontal rule ---------- */
hr {
  border: 0;
  border-top: var(--border);
  margin: var(--s-8) 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   4. Utility (just enough — not a framework)
   ───────────────────────────────────────────────────────────────────────────── */

.container {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (max-width: 900px) {
  .container { padding: 0 var(--s-6); }
}

.on-ink {
  background: var(--bg-inverse);
  color: var(--fg-onInverse);
}
.on-ink h1, .on-ink h2, .on-ink h3, .on-ink h4, .on-ink h5, .on-ink p {
  color: var(--fg-onInverse);
}
.on-ink .eyebrow, .on-ink .caption, .on-ink .small { color: rgba(244, 241, 234, 0.6); }

.hairline-top    { border-top: var(--border); }
.hairline-bottom { border-bottom: var(--border); }

/* tabular nums helper for stacks of figures */
.tabular { font-variant-numeric: tabular-nums; }