/* =============================================================
   VERSO — Colors & Type tokens
   Import this file anywhere in the project.
   ============================================================= */

@import url('./fonts/fonts.css');

:root {
  /* ---------- Brand palette ---------- */
  --verso-white:        #FFFFFF;   /* Background */
  --verso-ink:          #0D0D0D;   /* Text — near-black, not pure */
  --verso-green:        #1B4332;   /* Primary — deep hunter green */
  --verso-sage:         #9DB5B2;   /* Secondary — muted sage */
  --verso-cream:        #ECE3DC;   /* Accent surface — warm cream */

  /* ---------- Extended neutrals (derived, restrained) ---------- */
  --verso-ink-80:       #333333;
  --verso-ink-60:       #5C5C5C;
  --verso-ink-40:       #8A8A8A;
  --verso-ink-20:       #C7C7C7;
  --verso-ink-10:       #E5E5E5;
  --verso-ink-05:       #F3F1EE;   /* slightly warm off-white */

  /* ---------- Green tints (used sparingly for hover/press) ---------- */
  --verso-green-hover:  #15352A;   /* darker, press */
  --verso-green-soft:   #2A5A47;   /* lighter, hover on dark bg */
  --verso-green-10:     #E7ECEA;   /* faintest wash */

  /* ---------- Semantic surfaces ---------- */
  --bg:                 var(--verso-white);
  --bg-alt:             var(--verso-cream);
  --bg-deep:            var(--verso-green);
  --surface-muted:      var(--verso-ink-05);

  /* ---------- Semantic foreground ---------- */
  --fg-1:               var(--verso-ink);       /* primary text */
  --fg-2:               var(--verso-ink-60);    /* secondary text, meta */
  --fg-3:               var(--verso-ink-40);    /* tertiary, captions */
  --fg-on-dark:         var(--verso-white);
  --fg-on-cream:        var(--verso-green);

  /* ---------- Line & rule ---------- */
  --rule-1:             var(--verso-ink);       /* hairline on white */
  --rule-2:             var(--verso-ink-20);
  --rule-3:             var(--verso-ink-10);
  --rule-on-dark:       rgba(255,255,255,0.18);

  /* ---------- Accent / focus ---------- */
  --accent:             var(--verso-green);
  --accent-soft:        var(--verso-sage);
  --focus-ring:         color-mix(in oklab, var(--verso-green) 40%, transparent);

  /* ---------- Type families ---------- */
  --font-display: 'Crimson Pro', 'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --font-body:    'DM Sans', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale (modular, restrained) ----------
     Inspired by classical book typography. Display runs large; body stays 16–18px. */
  --fs-display:   clamp(56px, 8vw, 112px);   /* @kind font */ /* hero */
  --fs-h1:        clamp(40px, 5.2vw, 72px);  /* @kind font */ /* page title */
  --fs-h2:        clamp(28px, 3.2vw, 44px);  /* @kind font */ /* section */
  --fs-h3:        clamp(22px, 2.2vw, 28px);  /* @kind font */ /* sub-section */
  --fs-h4:        20px;   /* @kind font */
  --fs-lead:      20px;   /* intro paragraph @kind font */
  --fs-body:      17px;   /* @kind font */
  --fs-small:     15px;   /* @kind font */
  --fs-meta:      13px;   /* eyebrow, label, caption @kind font */
  --fs-micro:     11px;   /* @kind font */

  /* ---------- Line heights ---------- */
  --lh-display:   0.98;   /* @kind font */
  --lh-heading:   1.08;   /* @kind font */
  --lh-subhead:   1.2;    /* @kind font */
  --lh-body:      1.55;   /* @kind font */
  --lh-meta:      1.4;    /* @kind font */

  /* ---------- Tracking ---------- */
  --tr-display:   -0.02em;   /* @kind font */
  --tr-heading:   -0.015em;  /* @kind font */
  --tr-body:       0em;      /* @kind font */
  --tr-eyebrow:    0.14em;   /* uppercase labels @kind font */
  --tr-caps:       0.08em;   /* @kind font */

  /* ---------- Spacing (8-based with half-steps) ---------- */
  --sp-0:   0;     /* @kind spacing */
  --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 (restrained — classical feel) ---------- */
  --r-0:    0;     /* @kind radius */
  --r-1:    2px;
  --r-2:    4px;    /* default — cards, inputs */
  --r-3:    8px;
  --r-pill: 999px;

  /* ---------- Shadows (whisper-soft, rarely used) ---------- */
  --shadow-0:  none;
  --shadow-1:  0 1px 2px rgba(13,13,13,0.04), 0 1px 1px rgba(13,13,13,0.03);
  --shadow-2:  0 4px 16px rgba(13,13,13,0.06), 0 1px 2px rgba(13,13,13,0.04);
  --shadow-3:  0 18px 48px rgba(13,13,13,0.10), 0 2px 6px rgba(13,13,13,0.04);

  /* ---------- Motion ---------- */
  --dur-fast:   120ms;   /* @kind other */
  --dur-base:   220ms;   /* @kind other */
  --dur-slow:   480ms;   /* @kind other */
  --ease-standard:  cubic-bezier(0.2, 0.0, 0.0, 1.0);   /* @kind other */
  --ease-entrance:  cubic-bezier(0.16, 1, 0.3, 1);      /* @kind other */

  /* ---------- Layout ---------- */
  --container:      1200px;   /* @kind spacing */
  --container-wide: 1360px;   /* @kind spacing */
  --gutter:         clamp(20px, 4vw, 48px);   /* @kind spacing */
}

/* =============================================================
   Base / element styles
   ============================================================= */

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-variant-ligatures: common-ligatures contextual;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Display / headings — serif, tight, dark */
.display, h1.display {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--fg-1);
  text-wrap: balance;
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h1);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  text-wrap: balance;
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  text-wrap: balance;
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-subhead);
  letter-spacing: -0.01em;
}

h4, .h4 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: var(--lh-subhead);
  letter-spacing: 0;
}

/* Body copy */
p, .p {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--fg-2);
}

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

.meta,
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  font-weight: 500;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
  line-height: var(--lh-meta);
}

.caption {
  font-family: var(--font-body);
  font-size: var(--fs-meta);
  color: var(--fg-3);
  line-height: var(--lh-meta);
}

/* Quotes / pull-quotes — italic serif, a signature move for VERSO */
.pullquote,
blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}

/* Numerals — use tabular in data contexts */
.tnum { font-variant-numeric: tabular-nums; }

/* Links — understated, underline on hover */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity var(--dur-base) var(--ease-standard);
}
a:hover { opacity: 0.7; }

/* Selection — brand green */
::selection {
  background: var(--verso-green);
  color: var(--verso-white);
}

/* Horizontal rule — hairline, black on white */
hr {
  border: 0;
  border-top: 1px solid var(--rule-1);
  margin: var(--sp-7) 0;
}