/* Design tokens — jockeypr.co
 * Source: <kit>/mockups/jockeypr.co/b-marquise-1955.html (approved 2026-09-23, S3).
 * Names say the role; mockup values moved as they are. "added" marks what the
 * mockup does not define.
 */
:root {
  /* ── Colour: from the mockup ─────────────────────────────────────────── */
  --color-bg: #EFECE6;          /* concreto claro — page */
  --color-surface: #F9F7F3;     /* ticket, flow band, cards */
  --color-text: #1D2023;        /* tinta */
  --color-text-2: #565B5F;      /* secondary copy — 5.8:1 on bg */
  --color-muted: #656A6D;       /* captions, labels — mockup #8A8D8F raised to 4.6:1 (a11y) */
  --color-faint: #8A8D8F;       /* mockup's ink-3: decoration only (rules, icons), never text */
  --color-border: #D8D2C7;
  --color-brand: #9A3B2A;       /* pinhão / terracota — 5.9:1 on bg, white on it 6.9:1 */
  --color-brand-hover: #7A2C1F; /* mockup's brand-2 */
  --color-sky: #BCC9D0;         /* céu de Curitiba */
  --color-dusk: #EBCDBD;        /* entardecer — accent on dark only */
  --color-on-dark: #E9E5DE;     /* text on the ink band */
  --overlay-hero: linear-gradient(180deg, rgba(20,22,24,0) 0 92px, rgba(20,22,24,.66) 92px, rgba(20,22,24,0) 300px),   /* 0–92px: the header band paints it */
                  linear-gradient(90deg, rgba(20,22,24,.8) 0%, rgba(20,22,24,.55) 45%, rgba(20,22,24,0) 78%),
                  linear-gradient(0deg, rgba(20,22,24,.55), rgba(20,22,24,0) 45%);
  --overlay-hero-m: linear-gradient(180deg, rgba(20,22,24,0) 0 76px, rgba(20,22,24,.7) 76px, rgba(20,22,24,.62) 120px, rgba(20,22,24,.62) 30%, rgba(20,22,24,.85) 55%, rgba(20,22,24,.9));

  /* ── Colour: added ───────────────────────────────────────────────────── */
  --color-brand-active: color-mix(in srgb, var(--color-brand) 70%, black);
  --color-brand-tint: color-mix(in srgb, var(--color-brand) 10%, var(--color-surface));
  --color-live: #1F7A55;        /* "ao vivo" status — 5.3:1 on surface */
  --color-error: #A3261B;
  --color-success: #1F6B45;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-brand) 40%, transparent);

  /* ── Typography: from the mockup ─────────────────────────────────────── */
  --font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-h1: clamp(44px, 6.4vw, 96px);
  --fs-h2: clamp(34px, 3.8vw, 56px);
  --fs-h3: 34px;                /* ticket / panel titles */
  --fs-h4: 26px;                /* list-button serif */
  --fs-lead: 18px;
  --fs-body: 17px;
  --fs-ui: 15px;                /* nav, buttons */
  --fs-small: 14px;
  --fs-caption: 12px;           /* caps kicker (.cap), tracked .18em */
  --lh-tight: 1;
  --lh-snug: 1.2;
  --lh-base: 1.6;
  --tracking-cap: .18em;

  /* ── Space (8-px scale; mockup paddings 32/72/112) ───────────────────── */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-72: 72px;
  --space-112: 112px;
  --section-pad: var(--space-112);

  /* ── Shape: the marquise curve is the signature radius ───────────────── */
  --curve-xl: 220px 72px;       /* section band (flow) */
  --curve-lg: 160px 56px;       /* ticket, photo */
  --curve-md: 140px 48px;       /* panel */
  --curve-sm: 90px 34px;        /* mobile / small cards */
  --radius-pill: 999px;
  --radius-sm: 6px;
  --shadow-ticket: 0 -20px 60px -30px rgba(0,0,0,.5);
  --shadow-card: 0 1px 0 rgba(29,32,35,.04), 0 18px 40px -28px rgba(29,32,35,.35);

  /* ── Container: from the mockup ──────────────────────────────────────── */
  --container: 1280px;
  --container-pad: 32px;

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --dur-fast: 200ms;
  --dur-base: 250ms;
  --dur-slow: 450ms;
  --dur-reveal: 800ms;
  --ease: cubic-bezier(.22, .7, .2, 1);
  --ease-in: cubic-bezier(.5, 0, .8, .3);

  /* ── Layers (added) ──────────────────────────────────────────────────── */
  --z-header: 100;
  --z-sticky: 50;
  --z-overlay: 900;
  --z-modal: 1000;
}

@media (max-width: 640px) {
  :root {
    --container-pad: 16px;
    --section-pad: var(--space-72);
    --fs-h1: 46px;
    --fs-h3: 30px;
    --curve-lg: 90px 34px;
    --curve-xl: 110px 40px;
    --curve-md: 90px 34px;
  }
}

/* Breakpoints (media queries cannot read custom properties):
   --bp-mobile: 640px   --bp-tablet: 1080px   --bp-desktop: 1440px  (kit.config.json → breakpoints) */