/*--------------------------------------------------------------
# Tango en Vivo — design tokens (visual system 2026-09, S5c W1)
--------------------------------------------------------------
Single source of truth for colour, type, spacing, radii, elevation, sizes
and motion. Mirrors wp-tests reviews/VISUAL-2026-09/tokens.md — change
both. Loaded first (handle ticketsystem-tango-tokens); every other sheet
depends on it. Identity kept: black #121212 ground, gold #C6A664 accent,
Playfair Display headings, Inter body.
--------------------------------------------------------------*/

:root {
    /* ── Colour: identity ── */
    --ts-gold: #C6A664;
    --ts-gold-hover: #E8C37E;
    --ts-gold-soft: rgba(198, 166, 100, 0.12);
    --ts-black: #121212;

    /* ── Surfaces (Material dark elevation steps, unchanged) ── */
    --ts-surface-0: #121212;
    --ts-surface-1: #1E1E1E;
    --ts-surface-2: #232323;
    --ts-surface-4: #272727;
    --ts-surface-8: #2C2C2C;
    --ts-surface-12: #333333;

    /* ── Text roles ── */
    --ts-on-surface: #f5f2ea;
    --ts-on-surface-muted: #b9b3a4;
    --ts-lightgrey: #E0E0E0;
    --ts-mediumgrey-text: #A0A0A0;

    /* ── Borders / focus ── */
    --ts-border-color: rgba(255, 255, 255, 0.12);
    --ts-border-focus: rgba(198, 166, 100, 0.5);
    --ts-focus-ring: 0 0 0 3px rgba(198, 166, 100, 0.45);

    /* ── Semantic ── */
    --ts-success: #6fcf97;
    --ts-success-soft: rgba(111, 207, 151, 0.15);
    --ts-danger: #D32F2F;
    --ts-danger-soft: rgba(211, 47, 47, 0.15);
    --ts-danger-surface: #8f1d2c;
    --ts-info: #2196F3;
    --ts-info-soft: rgba(33, 150, 243, 0.15);

    /* ── Typography ── */
    --font-headings: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;

    --ts-fs-xs: 12px;
    --ts-fs-sm: 14px;
    --ts-fs-md: 16px;
    --ts-fs-lg: 18px;
    --ts-fs-xl: 22px;
    --ts-fs-2xl: 28px;
    --ts-fs-3xl: clamp(32px, 9vw, 40px);
    --ts-fs-display: clamp(36px, 5vw, 56px);
    --ts-lh-tight: 1.2;
    --ts-lh-normal: 1.5;
    --ts-ls-caps: 0.08em;
    --ts-fw-regular: 400;
    --ts-fw-medium: 500;
    --ts-fw-semibold: 600;
    --ts-fw-bold: 700;

    /* ── Spacing (4px base), gutters, container ── */
    --ts-space-1: 4px;
    --ts-space-2: 8px;
    --ts-space-3: 12px;
    --ts-space-4: 16px;
    --ts-space-5: 20px;
    --ts-space-6: 24px;
    --ts-space-8: 32px;
    --ts-space-10: 40px;
    --ts-space-12: 48px;
    --ts-space-16: 64px;
    --ts-space-20: 80px;
    --ts-gutter: clamp(16px, 4vw, 40px);
    --ts-container: 1280px;
    --ts-section-gap: clamp(40px, 8vw, 80px);

    /* ── Shape ── */
    --ts-radius-xs: 2px;
    --ts-radius-sm: 4px;
    --ts-radius: 8px;
    --ts-radius-lg: 16px;
    --ts-radius-sheet: 20px;
    --ts-radius-pill: 999px;

    /* ── Elevation ── */
    --ts-shadow-1: 0px 1px 3px rgba(0, 0, 0, 0.30), 0px 1px 2px rgba(0, 0, 0, 0.50);
    --ts-shadow-2: 0px 3px 6px rgba(0, 0, 0, 0.30), 0px 3px 6px rgba(0, 0, 0, 0.50);
    --ts-shadow-4: 0px 10px 20px rgba(0, 0, 0, 0.35), 0px 6px 6px rgba(0, 0, 0, 0.50);
    --ts-shadow-8: 0px 19px 38px rgba(0, 0, 0, 0.40), 0px 15px 12px rgba(0, 0, 0, 0.50);
    --ts-shadow-bar: 0 -8px 24px rgba(0, 0, 0, 0.55);

    /* ── Sizes, z-index ── */
    --ts-tap: 44px;
    --ts-thumb-agenda: 96px;
    --ts-header-h: 64px;
    --ts-z-sticky: 900;
    --ts-z-bar: 9999;
    --ts-z-overlay: 10000;

    /* ── Motion ── */
    --ts-ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
    --ts-ease-in: cubic-bezier(0.4, 0.0, 1, 1);
    --ts-transition-fast: 150ms;
    --ts-transition-normal: 250ms;
    --ts-transition-slow: 400ms;

    /* ── Legacy aliases (retire in S4b once their ~25 users migrate) ──
       --md-sys-color-primary used to be a second gold (#D4AF37); it now
       resolves to the one accent. */
    --md-sys-color-background: var(--ts-surface-0);
    --md-sys-color-surface: var(--ts-surface-1);
    --md-sys-color-surface-container: var(--ts-surface-8);
    --md-sys-color-primary: var(--ts-gold);
    --md-sys-color-on-primary: #000000;
    --md-sys-color-outline: #79747E;
    --md-border-radius-card: var(--ts-radius-lg);
    --md-border-radius-pill: 50px;
}

@media (min-width: 768px) {
    :root {
        --ts-header-h: 72px;
    }
}

/* Motion off site-wide when the visitor asks for it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}