/* STAIRS design tokens. All color, type, space, and width live here.
   Do not hardcode these values anywhere else in the codebase. */

:root {
  /* ---- color ---- */
  --ink:      #121212;  /* primary text, display */
  --ink-2:    #494542;  /* secondary text */
  --ink-3:    #8A847D;  /* tertiary / meta */
  --paper:    #F3EEE4;  /* primary background (warm off-white) */
  --paper-2:  #FFFFFF;  /* raised surface */
  --paper-3:  #ECE5D7;  /* subtle alt background (slightly deeper) */
  --line:     #DFD7C8;  /* hairline */
  --line-2:   #C6BCA9;  /* emphasised rule */

  /* rung colors: used only as labels, never as generic UI accents */
  --rung-1:   #B05A15;  /* burnt orange — Understand */
  --rung-2:   #B5321F;  /* coral red    — Attempt    */
  --rung-3:   #D99A2B;  /* ochre gold   — Augment    */
  --rung-4:   #156A5A;  /* deep teal    — Own        */

  /* accent: everything interactive (buttons, links, focus) */
  --accent:        var(--rung-4);
  --accent-ink:    #FFFFFF;
  --accent-hover:  #0E534A;
  --select:        #FCE6B8;  /* selection highlight */

  /* ---- type ---- */
  --font-display: Fraunces, "Source Serif 4", Georgia, serif;
  --font-body:    Inter, "Inter Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* type scale — fluid where it reads best */
  --fs-xs:      0.75rem;
  --fs-sm:      0.875rem;
  --fs-base:    1rem;
  --fs-md:      1.125rem;
  --fs-lg:      1.25rem;
  --fs-xl:      clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem);
  --fs-2xl:     clamp(1.625rem, 1.3rem + 1.4vw, 2rem);
  --fs-3xl:     clamp(2rem, 1.4rem + 2.6vw, 2.75rem);
  --fs-4xl:     clamp(2.5rem, 1.6rem + 4vw, 3.75rem);
  --fs-display: clamp(2.75rem, 1.2rem + 6.2vw, 5.25rem);

  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-body:    1.6;
  --lh-lede:    1.5;

  --tracking-display: -0.022em;
  --tracking-tight:   -0.012em;
  --tracking-wide:    0.06em;

  /* ---- spacing (rem) ---- */
  --s-1: 0.25rem;  --s-2: 0.5rem;   --s-3: 0.75rem; --s-4: 1rem;
  --s-5: 1.5rem;   --s-6: 2rem;     --s-7: 3rem;    --s-8: 4rem;
  --s-9: 6rem;     --s-10: 8rem;    --s-11: 12rem;

  /* ---- radii ---- */
  --r-sm:   4px;
  --r-md:   8px;
  --r-pill: 999px;

  /* ---- widths ---- */
  --w-prose:   42rem;
  --w-default: 72rem;
  --w-wide:    82rem;

  /* ---- timing ---- */
  --ease:      cubic-bezier(0.2, 0.7, 0.2, 1);
  --d-fast:    160ms;
  --d-med:     280ms;
  --d-slow:    520ms;
}

/* selection, caret, focus — set globally so accent reads across the site */
::selection { background: var(--select); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Self-hosted font declarations.
   Fraunces & Inter ship as variable fonts — one file covers the full weight range. */
@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/Fraunces.woff2") format("woff2-variations"),
       url("/static/fonts/Fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/static/fonts/Fraunces.woff2") format("woff2-variations"),
       url("/static/fonts/Fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/Inter.woff2") format("woff2-variations"),
       url("/static/fonts/Inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}