/* ============================================================
   foro.legal — Design Tokens · PAPER edition
   Editorial cream canvas, deep ink text, single ochre accent.
   ============================================================ */

/* --- Webfonts ---------------------------------------------- */

@font-face {
  font-family: "Newsreader";
  src: local("Newsreader"), url("fonts/Newsreader-Variable.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: local("Newsreader Italic"), url("fonts/Newsreader-Italic-Variable.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: local("Geist"), url("fonts/Geist-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: local("Geist Mono"), url("fonts/GeistMono-Variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300..700;1,6..72,300..700&family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap");

:root {
  /* === COLOR — BONE (paper surfaces, the canvas) ============ */
  /* Previously the "light text" ramp; in Paper edition it's the surface ramp. */
  --bone-0: #f4ecd8;           /* canvas — lightest cream */
  --bone-1: #ede3c9;           /* default surface */
  --bone-2: #e6dcc1;           /* elevated surface (cards, panels) */
  --bone-3: #dccfb0;           /* raised (hover, active panels) */
  --bone-4: #cdbf99;           /* pressed / strongest elevated */

  /* === COLOR — INK (deep text on paper) ===================== */
  /* Previously the "dark surface" ramp; now the text ramp. */
  --ink-0: #1c1610;            /* darkest text — primary */
  --ink-1: #382e1f;            /* secondary text */
  --ink-2: #5a4d36;            /* tertiary text / icons */
  --ink-3: #8a7a5c;            /* muted / captions */
  --ink-4: #b3a587;            /* disabled */

  /* === COLOR — LINE (borders, dividers — ink-tinted hairlines) */
  --line-1: rgba(28, 22, 16, 0.08);
  --line-2: rgba(28, 22, 16, 0.16);
  --line-3: rgba(28, 22, 16, 0.28);

  /* === COLOR — PAPER (alternative deeper-cream accent surfaces) */
  --paper-0: #efe5cd;          /* slightly deeper cream */
  --paper-1: #e3d6b3;          /* aged */
  --paper-2: #d0bf95;          /* sun-aged */
  --paper-3: #b59f74;          /* leathered */

  /* === COLOR — DARK PAPER (rare contrast surfaces, for rhythm) */
  --espresso-0: #251f17;       /* deep accent panel — used for marketing rhythm sections */
  --espresso-1: #2f261b;
  --espresso-2: #392d21;

  /* === COLOR — ACCENTS ======================================= */
  --ochre:      #b8763a;       /* primary accent — Old San Juan, deepened for paper */
  --ochre-soft: #c89764;       /* hover / decorative */
  --ochre-deep: #8a571f;       /* pressed */
  --ochre-tint: rgba(184, 118, 58, 0.12);  /* faint wash */

  --slate:      #5a6678;       /* cool secondary — info, links */
  --slate-soft: #7c8aa0;
  --slate-deep: #3c4658;

  /* === COLOR — SEMANTIC ====================================== */
  --ok:     #4f7a3e;           /* success / verified — deepened for paper */
  --warn:   #a07418;           /* caution */
  --danger: #a83a26;           /* error */
  --info:   var(--slate);

  /* === SEMANTIC TEXT ========================================= */
  --fg-1: var(--ink-0);
  --fg-2: var(--ink-1);
  --fg-3: var(--ink-2);
  --fg-4: var(--ink-3);
  --fg-on-accent: #faf6ed;     /* light text on ochre/danger backgrounds */
  --fg-link: var(--ochre-deep);

  /* === SEMANTIC SURFACE ====================================== */
  --bg-canvas:   var(--bone-0);
  --bg-surface:  var(--bone-1);
  --bg-elevated: var(--bone-2);
  --bg-raised:   var(--bone-3);
  --bg-overlay:  rgba(28, 22, 16, 0.42);

  /* === TYPOGRAPHY — FAMILIES ================================ */
  --font-serif: "Newsreader", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-sans:  "Geist", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* === TYPOGRAPHY — SCALE =================================== */
  --fs-xs:    11px;
  --fs-sm:    13px;
  --fs-base:  15px;
  --fs-md:    17px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   30px;
  --fs-3xl:   38px;
  --fs-4xl:   48px;
  --fs-5xl:   62px;
  --fs-6xl:   80px;

  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;
  --lh-loose:   1.75;

  --tracking-tight:  -0.022em;
  --tracking-snug:   -0.012em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.14em;

  /* === SPACING (4px base) =================================== */
  --s-0: 0;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;
  --s-10: 72px;
  --s-11: 96px;
  --s-12: 128px;

  /* === RADIUS =============================================== */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-2xl: 20px;
  --r-pill: 999px;

  /* === SHADOWS (soft on paper; warm ink, low opacity) ======= */
  --shadow-1: 0 1px 0 rgba(28,22,16,0.04), 0 1px 2px rgba(28,22,16,0.06);
  --shadow-2: 0 2px 8px rgba(28,22,16,0.08), 0 1px 2px rgba(28,22,16,0.05);
  --shadow-3: 0 12px 32px -8px rgba(28,22,16,0.16), 0 2px 6px rgba(28,22,16,0.08);
  --shadow-4: 0 28px 64px -16px rgba(28,22,16,0.22), 0 4px 12px rgba(28,22,16,0.10);
  --shadow-inset: inset 0 1px 0 rgba(255, 252, 240, 0.5);
  --shadow-focus: 0 0 0 3px rgba(184, 118, 58, 0.28);

  /* === MOTION =============================================== */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap:   cubic-bezier(0.5, 1.2, 0.5, 1);
  --dur-instant: 80ms;
  --dur-fast:    140ms;
  --dur-normal:  220ms;
  --dur-slow:    420ms;

  /* === LAYOUT =============================================== */
  --maxw-prose:  68ch;
  --maxw-narrow: 720px;
  --maxw-page:   1280px;
  --maxw-wide:   1440px;
}

/* =============================================================
   SEMANTIC TYPOGRAPHY — use these classes on text
   ============================================================ */

.t-display {
  font-family: var(--font-serif);
  font-size: var(--fs-6xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
  font-optical-sizing: auto;
}
.t-h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 400;
}
.t-h2 {
  font-family: var(--font-serif);
  font-size: var(--fs-4xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 400;
}
.t-h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 400;
}
.t-h4 {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 500;
}
.t-h5 {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-normal);
  font-weight: 500;
}
.t-lead {
  font-family: var(--font-serif);
  font-size: var(--fs-xl);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--tracking-snug);
  font-weight: 300;
  color: var(--fg-2);
}
.t-body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  font-weight: 400;
  color: var(--fg-2);
}
.t-body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  font-weight: 400;
  color: var(--fg-2);
}
.t-caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
  font-weight: 400;
  color: var(--fg-3);
}
.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  line-height: 1;
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--ochre-deep);
}
.t-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  font-weight: 400;
  letter-spacing: 0;
}
.t-cite {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-base);
  font-weight: 400;
  color: var(--fg-2);
}
.t-quote {
  font-family: var(--font-serif);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  font-weight: 300;
  font-style: italic;
  color: var(--fg-1);
}

/* Universal base */
html, body {
  background: var(--bg-canvas);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--ochre-tint); color: var(--ink-0); }