/* Design tokens — from the :root of the approved mockup
 * mockups/jookeyrs.br.com/c-horizonte-do-guaiba.html («Horizonte do Guaíba», Luxury Couture), 2026-09-28.
 *
 * Values from the mockup move here as they are. Anything the mockup did not define
 * (states, focus, errors, layers, motion) is marked «added».
 */
:root {
  /* ── Colour: from the mockup ─────────────────────────────────────────── */
  --color-bg: #F4F1EC;            /* osso */
  --color-surface: #FBFAF7;
  --color-ink: #1A1D24;           /* noite */
  --color-ink-2: #555A63;         /* 6.1:1 on bg */
  --color-line: #DDD8CF;
  --color-line-strong: #B9B2A6;
  --color-brand: #3E6A80;         /* aço do Guaíba — 5.1:1 on bg */
  --color-brand-ink: #2F5264;
  --color-brand-wash: #E6ECEE;
  --color-accent: #D2643F;        /* poente — decorative only: sun dot, rings (3.3:1, never text) */

  /* ── Colour: added ───────────────────────────────────────────────────── */
  --color-accent-text: #A94A2B;   /* added: accent when it has to be text (forfait, alerts) — 5.2:1 on bg */
  --color-error: #A93226;         /* added */
  --color-error-wash: #F6E4DF;    /* added */
  --color-success: #2E6B45;       /* added */
  --color-success-wash: #E3EEE6;  /* added */
  --color-scrim: rgba(26, 29, 36, .28);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-brand) 35%, transparent);   /* added */

  /* template aliases — the kit's base layer reads these names */
  --color-text: var(--color-ink);
  --color-muted: var(--color-ink-2);
  --color-border: var(--color-line);
  --color-brand-hover: var(--color-brand-ink);
  --color-brand-active: color-mix(in srgb, var(--color-brand-ink) 85%, black);

  /* ── Typography: from the mockup ─────────────────────────────────────── */
  --font-display: "Instrument Serif", "Times New Roman", serif;
  --font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --fs-h1: clamp(3.4rem, 9.2vw, 8.6rem);
  --fs-h1-page: clamp(2.9rem, 6.4vw, 5.75rem);   /* added: H1 of inner pages — same face, one step below the home hero */
  --fs-h2: clamp(2.4rem, 4.2vw, 3.75rem);
  --fs-h3: clamp(1.6rem, 2.2vw, 2rem);
  --fs-value: clamp(1.5rem, 2vw, 1.875rem);
  --fs-lead: clamp(1.125rem, 1.4vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-micro: .75rem;
  --lh-tight: 1.1;
  --lh-base: 1.6;

  /* ── Space, shape: from the mockup ───────────────────────────────────── */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --space-10: 8rem;
  --radius-s: 2px;
  --radius-m: 4px;
  --radius-pill: 999px;
  --shadow-panel: 0 18px 50px rgba(26, 29, 36, .12);   /* added: sheet, dialogs */

  /* ── Container: from the mockup ──────────────────────────────────────── */
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --max: 1320px;
  --max-text: 68ch;               /* added: reading measure of long pages */
  --header-h: 84px;               /* 68px below 1080 */

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.2, .7, .2, 1);     /* from the mockup */
  --dur-fast: 200ms;                        /* added */
  --dur-base: 250ms;
  --dur-slow: 400ms;

  /* ── Layers (added) ──────────────────────────────────────────────────── */
  --z-header: 40;
  --z-sheet: 60;
  --z-overlay: 80;
  --z-modal: 100;
}

/* Breakpoints (cannot be custom properties in media queries), as in the mockup:
   1080px — nav collapses to «Menu», zigzag stacks · 640px — phone layout.
   Reference widths in kit.config.json → breakpoints: 1440 / 390. */