/* Hupp Goods design tokens: the only place colours, spacing, radius, borders, type and motion are set.
   style.css uses these variables and nothing else. Two themes from the same roles: light and dark.
   Text/background pairs are checked for WCAG AA by deploy/check_contrast.py. */

@font-face {
  font-family: 'Inter';
  src: url('fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Spacing: 4 px base. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* Shape: one radius (pills aside), one border weight. */
  --radius: 10px;
  --radius-pill: 999px;
  --bw: 1px;

  /* Type. Body is big on purpose: this is a reading site. */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --t-xs: 0.8125rem;   /* 13 */
  --t-sm: 0.9375rem;   /* 15 */
  --t-base: 1.0625rem; /* 17 */
  --t-lg: 1.1875rem;   /* 19 */
  --t-xl: 1.5rem;      /* 24 */
  --t-2xl: 2rem;       /* 32 */
  --t-3xl: clamp(2rem, 1.4rem + 2.6vw, 3rem); /* 32 -> 48 */
  --lh: 1.65;
  --lh-tight: 1.2;
  --measure: 68ch;

  /* Layout. */
  --content-max: 1120px;
  --article-max: 760px;
  --header-h: 72px;

  /* Motion: calm, short. */
  --dur: 140ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* Brand constants (same in both themes). */
  --brand-navy: #1F2A44;
  --brand-terracotta: #C96F4A;
}

/* Light: warm off-white paper, near-black text, navy headings. */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: #F7F3ED;
  --surface: #FFFDF9;
  --surface-2: #F0EAE0;
  --text: #2B2B2B;
  --text-muted: #55524C;
  --text-subtle: #6B6960;
  --heading: #1F2A44;
  --link: #1F2A44;
  --link-hover: #9A4F2E;
  --accent: #A85936;          /* button fill */
  --accent-hover: #8E4A2C;
  --on-accent: #FFFFFF;
  --accent-text: #9A4F2E;     /* terracotta used as text on bg/surface */
  --border: #E4DBCF;
  --border-strong: #C9C2B4;
  --focus: #1F2A44;
  --hero-bg: #1F2A44;
  --hero-text: #F7F3ED;
  --hero-muted: #D5DAE4;
  --hero-accent: #E9A27F;
  --tint-warm: #FBF2E9;
  --tint-warm-border: #EBD9C4;
  --tint-sage: #EEF1EA;
  --tint-sage-border: #8A9A8B;
  --tint-danger: #FDE8E4;
  --danger-text: #7A2F17;
  --sage-text: #4F5E50;
  --shadow: 0 1px 2px rgba(31, 42, 68, 0.06), 0 8px 24px rgba(31, 42, 68, 0.06);
  --header-bg: rgba(247, 243, 237, 0.88);
}

/* Dark: Studio-style charcoal, lifted navy for links, warm light text. */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #16181D;
  --surface: #1D2027;
  --surface-2: #232731;
  --text: #E6E2DB;
  --text-muted: #B6B1A8;
  --text-subtle: #9C978E;
  --heading: #F2EEE8;
  --link: #A9BCE3;
  --link-hover: #EBA07E;
  --accent: #D27A55;
  --accent-hover: #E08C68;
  --on-accent: #16181D;
  --accent-text: #EBA07E;
  --border: #2E333D;
  --border-strong: #454B58;
  --focus: #A9BCE3;
  --hero-bg: #1B2234;
  --hero-text: #F2EEE8;
  --hero-muted: #C3CAD8;
  --hero-accent: #EBA07E;
  --tint-warm: #2A221D;
  --tint-warm-border: #4A3A2F;
  --tint-sage: #1F2622;
  --tint-sage-border: #5D6B5E;
  --tint-danger: #33201B;
  --danger-text: #F2B4A0;
  --sage-text: #A9BAAA;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.25);
  --header-bg: rgba(22, 24, 29, 0.88);
}