/* Design tokens — from the approved mockup B «Tribün»
 * (__SITE_KIT/mockups/milipiyangoonline.com/b-tribun.html, approved 2026-10-13).
 * Colour values are the TZ §3 palette, carried by the mockup unchanged.
 * Names say the role; mockup aliases (--r16, --sec …) are kept so moved CSS reads 1:1.
 */
:root {
  /* ── Colour: from the mockup (= TZ §3) ───────────────────────────────── */
  --color-navy: #10263E;          /* header bar, footer, headings */
  --color-navy-2: #1B3955;        /* hover on navy, dark seat plates */
  --color-brand: #087F8C;         /* teal: primary actions, active chips */
  --color-brand-tint: #E6F4F4;
  --color-amber: #F3B84B;         /* neutral labels only: Örnek, 18+, Demo oranlar */
  --color-canvas: #F7F9FC;        /* page background */
  --color-surface: #FFFFFF;       /* cards, panels */
  --color-text: #1B2C3B;
  --color-muted: #5D6B79;         /* 5.4:1 on canvas */
  --color-line: #DDE5EC;
  --color-error: #B42318;
  --color-focus: #1769D2;

  /* derived in the mockup */
  --surface-2: color-mix(in srgb, var(--color-canvas) 60%, var(--color-line));
  --brand-ink: color-mix(in srgb, var(--color-brand) 82%, var(--color-navy));   /* teal text on white, 5.9:1 */
  --navy-tint: color-mix(in srgb, var(--color-navy) 8%, white);

  /* ── Colour: added (not drawn in the mockup) ────────────────────────── */
  --color-bg: var(--color-canvas);                 /* alias for kit base.css */
  --color-border: var(--color-line);               /* alias for kit components */
  --color-brand-hover: var(--brand-ink);
  --color-brand-active: color-mix(in srgb, var(--color-brand) 70%, var(--color-navy));
  --color-success: #146C2E;
  --color-amber-tint: color-mix(in srgb, var(--color-amber) 18%, white);
  --color-error-tint: color-mix(in srgb, var(--color-error) 8%, white);
  --on-navy: color-mix(in srgb, #fff 82%, var(--color-navy));       /* body text on navy */
  --on-navy-muted: color-mix(in srgb, #fff 68%, var(--color-navy));
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-focus) 40%, transparent);

  /* ── Typography: from the mockup (TZ §3) ────────────────────────────── */
  --font: "Inter", Arial, sans-serif;
  --font-display: var(--font);
  --font-body: var(--font);
  --fs-h1: 40px;   --lh-h1: 48px;
  --fs-h2: 28px;   --lh-h2: 36px;
  --fs-h3: 20px;   --lh-h3: 28px;
  --fs-lead: 18px; --lh-lead: 28px;
  --fs-body: 16px; --lh-body: 26px;
  --fs-small: 14px;
  --fs-xs: 13px;
  --fs-micro: 12px;
  --lh-tight: 1.2;
  --lh-base: 1.625;   /* 26/16 */

  /* ── Space ──────────────────────────────────────────────────────────── */
  --space-4: 4px;  --space-8: 8px;  --space-12: 12px; --space-16: 16px;
  --space-20: 20px; --space-24: 24px; --space-32: 32px; --space-48: 48px;
  --space-64: 64px; --space-72: 72px;
  --sec: 72px;                 /* section padding: 72 / 48 / 40 (TZ §3) */
  --gutter: 24px;              /* 16 on mobile */

  /* ── Shape & depth: from the mockup ─────────────────────────────────── */
  --r8: 8px; --r12: 12px; --r16: 16px; --r20: 20px; --pill: 999px;
  --radius-sm: var(--r8); --radius-md: var(--r12); --radius-lg: var(--r16);
  --seat-radius: 14px 14px 7px 7px;                 /* signature: seat-number plate */
  --shadow: 0 8px 24px rgba(16, 38, 62, .06);        /* TZ card shadow */
  --shadow-hover: 0 14px 32px rgba(16, 38, 62, .09);
  --shadow-lg: 0 18px 48px rgba(16, 38, 62, .16);
  --shadow-card: var(--shadow);

  /* ── Container ──────────────────────────────────────────────────────── */
  --container: 1200px;
  --container-pad: var(--gutter);

  /* ── Header ─────────────────────────────────────────────────────────── */
  --bar-h: 80px;               /* 64 on mobile (TZ §3) */
  --band-h: 60px;              /* sport category band, 56 on mobile */
  --head-h: calc(var(--bar-h) + var(--band-h));

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

  /* ── Layers ─────────────────────────────────────────────────────────── */
  --z-header: 50;
  --z-overlay: 80;
  --z-drawer: 90;
  --z-modal: 1000;
}

@media (max-width: 1100px) {
  :root { --sec: 48px; }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; --sec: 40px; --bar-h: 64px; --band-h: 56px;
          --fs-h1: 30px; --lh-h1: 38px; --fs-h2: 24px; --lh-h2: 32px; }
}

/* Breakpoints (media queries cannot read custom properties):
   --bp-mobile: 760px   --bp-tablet: 1100px   reference widths 390 / 1440 (kit.config.json) */