/* ============================================================
   WO Studio — Colors & Type Foundations
   Use these tokens for ALL surfaces. Do not invent new colors.
============================================================ */

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces-Italic-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Italic-Variable.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- CORE PALETTE ---------- */
  --wo-coral:       #DE6A6B; /* Signature accent. Italic words, dots, pattern fill */
  --wo-ink:         #1D1C1C; /* Primary text & dark surfaces */
  --wo-paper:       #F5F1EA; /* Default ground — warm off-white */
  --wo-oxblood:     #3D2F2A; /* Deep editorial accent */
  --wo-bone:        #D9CFC0; /* Quiet neutral ground */
  --wo-moss:        #7A8471; /* Tertiary accent — used sparingly */

  /* ---------- SEMANTIC FOREGROUND/BACKGROUND ---------- */
  --bg:             var(--wo-paper);
  --bg-alt:         var(--wo-bone);
  --bg-inverse:     var(--wo-ink);
  --bg-deep:        var(--wo-oxblood);
  --accent:         var(--wo-coral);

  --fg1:            var(--wo-ink);                  /* primary text */
  --fg2:            rgba(29, 28, 28, 0.55);         /* muted */
  --fg3:            rgba(29, 28, 28, 0.35);         /* tertiary / metadata */
  --fg-on-dark:     var(--wo-paper);
  --fg-on-dark-2:   rgba(245, 241, 234, 0.65);

  --rule:           rgba(29, 28, 28, 0.15);         /* hairline rules */
  --rule-strong:    rgba(29, 28, 28, 0.30);
  --rule-on-dark:   rgba(245, 241, 234, 0.20);

  /* ---------- TYPE FAMILIES ---------- */
  --font-serif:     "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans:      "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono:      "Inter", ui-monospace, SFMono-Regular, monospace; /* WO uses Inter for mono-style labels */

  /* ---------- TYPE SCALE (rem-aware px) ---------- */
  --fs-display-xl:  clamp(72px, 12vw, 180px); /* hero / cover */
  --fs-display-lg:  clamp(48px, 7vw, 96px);   /* page-opener */
  --fs-display-md:  clamp(36px, 5vw, 64px);   /* section title */
  --fs-display-sm:  clamp(28px, 3.5vw, 44px); /* sub-section */
  --fs-h3:          28px;
  --fs-h4:          22px;
  --fs-body-lg:     19px;
  --fs-body:        15px;
  --fs-body-sm:     13px;
  --fs-caption:     11px;
  --fs-eyebrow:     10px;
  --fs-mono:        11px;

  --lh-display:     0.95;
  --lh-tight:       1.1;
  --lh-snug:        1.3;
  --lh-body:        1.65;

  --ls-display:     -0.03em;
  --ls-tight:       -0.02em;
  --ls-normal:      -0.01em;
  --ls-eyebrow:     0.25em;
  --ls-caps:        0.2em;
  --ls-mono:        0.15em;

  /* ---------- SPACING ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-8:  48px;
  --space-10: 64px;
  --space-12: 80px;
  --space-16: 120px;

  /* ---------- RADII ---------- */
  --radius-0: 0px;          /* default — WO is hard-edged */
  --radius-pill: 999px;     /* pills only */
  --radius-dot: 50%;

  /* ---------- BORDERS ---------- */
  --border-hairline: 0.5px solid var(--rule);
  --border-thin:     1px solid var(--rule);
  --border-ink:      1px solid var(--wo-ink);

  /* ---------- SHADOWS (used very sparingly) ---------- */
  --shadow-none:  none;
  --shadow-soft:  0 1px 2px rgba(29, 28, 28, 0.04), 0 8px 24px rgba(29, 28, 28, 0.06);
  --shadow-press: 0 0 0 1px var(--wo-ink) inset;

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    150ms;
  --dur-base:    240ms;
  --dur-slow:    480ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
============================================================ */

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

h1, .h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-display-lg);
  font-weight: 400;
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--fg1);
}

h2, .h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-display-md);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  color: var(--fg1);
}

h3, .h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-display-sm);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-normal);
}

h4, .h4 {
  font-family: var(--font-serif);
  font-size: var(--fs-h4);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--ls-normal);
}

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

.body-lg { font-size: var(--fs-body-lg); line-height: 1.65; max-width: 680px; }
.body-sm { font-size: var(--fs-body-sm); line-height: 1.6; color: var(--fg2); max-width: 560px; }

.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--fg2);
  display: block;
}

.mono, .label {
  font-family: var(--font-sans);
  font-size: var(--fs-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--fg2);
}

.italic-coral, em.coral {
  color: var(--wo-coral);
  font-style: italic;
}

code, pre, .code {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  letter-spacing: 0.02em;
  background: var(--wo-bone);
  padding: 2px 6px;
}

a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--wo-coral); border-color: var(--wo-coral); }

hr {
  border: 0;
  height: 0.5px;
  background: var(--rule);
}

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

/* ---------- THE CORAL DOT ---------- */
.dot {
  display: inline-block;
  width: 0.5em; height: 0.5em;
  border-radius: var(--radius-dot);
  background: var(--wo-coral);
  vertical-align: middle;
  margin: 0 0.15em;
}
.dot-lg { width: 16px; height: 16px; }
.dot-xl { width: 28px; height: 28px; }