/* Design tokens — jcpelotas.com
 * Source: approved mockup A «Folha de Programa» (Swiss Editorial),
 * <kit>/mockups/jcpelotas.com/a-folha-de-programa.html, approved 2026-09-24.
 * Values of the mockup's :root move here as they are; what the mockup did not
 * define is marked «added».
 */
:root {
  /* ── Colour: from the mockup ─────────────────────────────────────────── */
  --color-bg: #F3F1EA;            /* cal — page */
  --color-surface: #FFFFFF;       /* sheet / tiles */
  --color-surface-2: #FAF9F5;     /* row hover (mockup inline value) */
  --color-text: #14172A;          /* tinta */
  --color-muted: #4A4E5E;         /* ink-2: 8.2:1 on cal */
  --color-brand: #2B337B;         /* club blue (jcpelotas.com.br theme-color) */
  --color-brand-deep: #1E2461;
  --color-brand-tint: #E8E9F3;
  --color-accent: #D6362C;        /* distance-post red — small markers only */
  --color-border: #D9D5CA;        /* hairline */
  --color-on-brand: #FFFFFF;
  --color-on-brand-muted: #E4E6F3;
  --color-scrim: rgb(20 23 42 / .5);
  --color-caption: rgb(20 23 42 / .82);

  /* ── Colour: added (states, feedback) ────────────────────────────────── */
  --color-brand-hover: var(--color-brand-deep);
  --color-brand-active: color-mix(in srgb, var(--color-brand) 70%, black);
  --color-error: #B3261E;
  --color-error-bg: #FBEDEC;
  --color-success: #1D6B3A;
  --color-success-bg: #E9F3EC;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-brand) 40%, transparent);

  /* ── Typography: from the mockup ─────────────────────────────────────── */
  --font-display: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: var(--font-display);
  --font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --fs-h1: clamp(3rem, 1.1rem + 6vw, 7rem);
  --fs-h1-sub: clamp(1.5rem, 1rem + 1.9vw, 2.6rem);
  --fs-page-h1: clamp(2.5rem, 1.2rem + 3.6vw, 4.75rem);   /* added: inner pages */
  --fs-h2: clamp(2rem, 1.3rem + 2.2vw, 3.25rem);
  --fs-h3: clamp(1.35rem, 1.1rem + .8vw, 1.75rem);
  --fs-lead: 17px;
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-mono-xs: .75rem;
  --lh-tight: .98;
  --lh-snug: 1.2;
  --lh-base: 1.55;
  --ls-display: -.045em;

  /* ── Space (mockup scale) ────────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 112px;

  /* ── Shape ───────────────────────────────────────────────────────────── */
  --radius: 2px;
  --oct: polygon(29.3% 0, 70.7% 0, 100% 29.3%, 100% 70.7%, 70.7% 100%, 29.3% 100%, 0 70.7%, 0 29.3%);
  --shadow-panel: 0 12px 40px rgb(20 23 42 / .18);   /* added: overlays */

  /* ── Layout: from the mockup ─────────────────────────────────────────── */
  --rail: 248px;
  --container: 1140px;
  --container-pad: 56px;

  /* ── Motion (added; mockup easing kept) ──────────────────────────────── */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 250ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-in: cubic-bezier(.5, 0, .8, .3);

  /* ── Layers ──────────────────────────────────────────────────────────── */
  --z-topbar: 30;
  --z-rail: 40;
  --z-scrim: 55;
  --z-rail-open: 60;
  --z-overlay: 900;
  --z-modal: 1000;
}

/* Breakpoints (media queries cannot read custom properties):
   1279 — container 40px, phead/meta stack · 1023 — rail becomes a sheet + topbar
   899 — hero/bento single column · 759 — phone: 16px gutter, tables → cards
   kit.config.json → breakpoints: desktop 1440, mobile 390 */