/* ============================================================
   Robin Barrow — Design System
   Colors & Typography Tokens
   ============================================================

   Visual direction: editorial, warm neutrals, premium-but-human,
   serif display + calm humanist sans, strong hierarchy, restraint.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,300;1,6..72,400&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Archivo:wght@500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ----------------------------------------------------------
     COLOR — Warm neutrals, paper-ivory base, deep ink foreground.
     No pure black, no cold greys. One accent: "ember" — a burnt
     terracotta that nods to the profile portrait's warmth.
     ---------------------------------------------------------- */

  /* Surfaces — warm paper tones, not cold greys */
  --paper:        #F5F0E8;  /* page background — warm ivory */
  --paper-raised: #FAF6EF;  /* raised surface, subtle lift */
  --paper-sunk:   #EDE6D9;  /* rule lines, dividers, sunk wells */
  --paper-edge:   #E2D9C7;  /* hairline borders at rest */
  --vellum:       #FBF8F2;  /* lightest — for tooltips, chips */

  /* Foreground — ink, not black */
  --ink:          #1E1A16;  /* display ink — deepest, for headlines */
  --ink-body:     #2C2722;  /* body copy — warm near-black */
  --ink-muted:    #5C5349;  /* secondary text, meta, captions */
  --ink-soft:     #8A7F71;  /* tertiary, timestamps, dividers */
  --ink-faint:    #B8AD9D;  /* very quiet — placeholders */

  /* Accent — ember (warm terracotta) */
  --ember:        #B8532A;  /* primary accent — links, marks */
  --ember-deep:   #8F3D1C;  /* pressed / hover */
  --ember-soft:   #D97B54;  /* decorative, highlights */
  --ember-wash:   #F3E2D6;  /* tinted background wash */

  /* Signal — used sparingly */
  --sage:         #5A6B4F;  /* "available" indicator, positive */
  --sage-soft:    #D8DDD0;

  /* Shadows — warm, low-contrast, never harsh */
  --shadow-xs: 0 1px 0 rgba(44, 39, 34, 0.04);
  --shadow-sm: 0 1px 2px rgba(44, 39, 34, 0.06), 0 1px 0 rgba(44, 39, 34, 0.03);
  --shadow-md: 0 8px 24px -12px rgba(44, 39, 34, 0.12), 0 2px 6px rgba(44, 39, 34, 0.05);
  --shadow-lg: 0 24px 56px -24px rgba(44, 39, 34, 0.18), 0 4px 12px rgba(44, 39, 34, 0.06);

  /* ----------------------------------------------------------
     TYPE — Display serif + humanist sans + editorial mono.
     Display: Newsreader (literary, warm, modern — high contrast)
     Text / UI: DM Sans (humanist, calm, not trendy)
     Caption / Meta: JetBrains Mono (editorial labels, small caps)
     ---------------------------------------------------------- */

  --font-display: 'Newsreader', 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --font-text:    'DM Sans', 'Söhne', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mark:    'Archivo', 'Söhne Breit', 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  /* Type scale — editorial, generous, not tightly packed */
  --fs-display-xl: clamp(3.25rem, 6vw + 1rem, 5.75rem); /* hero */
  --fs-display-lg: clamp(2.5rem, 4vw + 1rem, 4rem);     /* section openers */
  --fs-display-md: clamp(2rem, 2.5vw + 1rem, 2.75rem);  /* sub-openers */
  --fs-h1:         2.25rem;
  --fs-h2:         1.625rem;
  --fs-h3:         1.25rem;
  --fs-body-lg:    1.125rem;  /* lead paragraphs */
  --fs-body:       1.0625rem; /* default body */
  --fs-body-sm:    0.9375rem; /* tight body */
  --fs-meta:       0.8125rem; /* mono labels */
  --fs-caption:    0.75rem;   /* smallest */

  /* Line heights */
  --lh-display:   1.04;
  --lh-heading:   1.18;
  --lh-body:      1.55;
  --lh-tight:     1.3;

  /* Tracking */
  --tr-tight:     -0.02em;
  --tr-snug:      -0.01em;
  --tr-normal:    0;
  --tr-wide:      0.08em;
  --tr-mono:      0.02em;

  /* Weights */
  --w-light:      300;
  --w-regular:    400;
  --w-medium:     500;
  --w-semibold:   600;

  /* ----------------------------------------------------------
     SPACING — 4px base, editorial generosity
     ---------------------------------------------------------- */
  --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;
  --sp-11:  160px;

  /* ----------------------------------------------------------
     RADII — soft, minimal. Nothing pill-shaped except buttons.
     ---------------------------------------------------------- */
  --r-sm:  3px;
  --r-md:  6px;
  --r-lg:  10px;
  --r-pill: 999px;

  /* Borders */
  --border-hairline: 1px solid var(--paper-edge);
  --border-rule:     1px solid var(--paper-sunk);

  /* Layout */
  --container: 1120px;
  --container-narrow: 720px;
  --container-wide:   1280px;

  /* Motion */
  --ease-out:  cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out: cubic-bezier(0.6, 0, 0.2, 1);
  --dur-fast:  160ms;
  --dur-base:  240ms;
  --dur-slow:  400ms;
}

/* ============================================================
   SEMANTIC BASE — apply to raw HTML for effortless editorial feel
   ============================================================ */

html {
  font-family: var(--font-text);
  font-size: 17px;
  color: var(--ink-body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--w-regular);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--w-regular);
  color: var(--ink);
  letter-spacing: var(--tr-snug);
  line-height: var(--lh-heading);
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); letter-spacing: var(--tr-tight); line-height: var(--lh-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-family: var(--font-text); font-weight: var(--w-medium); letter-spacing: var(--tr-normal); }

p {
  margin: 0 0 1em;
  max-width: 62ch;
  text-wrap: pretty;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--paper-edge);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
a:hover {
  text-decoration-color: var(--ember);
  color: var(--ember-deep);
}

small, .meta, .caption {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: var(--tr-mono);
  color: var(--ink-muted);
  text-transform: uppercase;
}

hr {
  border: 0;
  border-top: var(--border-rule);
  margin: var(--sp-7) 0;
}

::selection {
  background: var(--ember-wash);
  color: var(--ember-deep);
}