/**
 * Ticketa Theme — assets/css/variables.css
 *
 * RESPONSIBILITY:
 *   All CSS custom properties (design tokens) for the entire site.
 *   This file has NO selectors other than :root — only variable definitions.
 *   Loaded first by enqueue.php so every component file can inherit from it.
 *
 * HOW TO CHANGE THE BRAND:
 *   Edit only this file. Every component inherits these values automatically.
 *
 * @package Ticketa
 * @version 1.1.0
 * @since   1.0.0
 */

:root {

    /* ── Brand colours ────────────────────────────────────────────────────── */
    --ticketa-bg:            #0d0d0d;
    --ticketa-bg-card:       #191919;
    --ticketa-bg-panel:      #141414;
    --ticketa-bg-surface:    #242424;
    --ticketa-bg-wizard-main:#1c1c1c;

    --ticketa-white:         #ffffff;
    --ticketa-off-white:     #f0ede8;
    --ticketa-grey-muted:    #7a7a7a;
    --ticketa-grey-mid:      #4a4a4a;

    --ticketa-orange:        #e87722;
    --ticketa-orange-hover:  #ff8c3a;
    --ticketa-orange-dim:    rgba(232, 119, 34, 0.15);

    --ticketa-gold:          #c8a84b;
    --ticketa-gold-light:    #e8c870;
    --ticketa-gold-bg:       linear-gradient(135deg, #c8a84b 0%, #a07830 55%, #6b5020 100%);

    /* Wizard sidebar (white panel) */
    --ticketa-sidebar-bg:    #ffffff;
    --ticketa-sidebar-text:  #111111;
    --ticketa-sidebar-muted: #666666;
    --ticketa-sidebar-border:#e8e8e8;
    --ticketa-sidebar-width: 340px;

    /* ── Borders ──────────────────────────────────────────────────────────── */
    --ticketa-border:        rgba(255, 255, 255, 0.08);
    --ticketa-border-strong: rgba(255, 255, 255, 0.18);
    --ticketa-border-orange: rgba(232, 119, 34, 0.4);

    /* ── Typography ───────────────────────────────────────────────────────── */
    /* Each variable resolves to a full stack so missing webfonts gracefully
     * degrade to similar system faces, keeping rendering consistent across
     * pages and devices. */
    --font-display:  'Secular One', 'Rubik', 'Heebo', 'Assistant', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-body:     'Rubik', 'Heebo', 'Assistant', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --font-en-head:  'Barlow Condensed', 'Rubik', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    --font-mono:     ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;
    --text-6xl:  4rem;
    --text-hero: clamp(3rem, 8vw, 7rem);

    /* ── Spacing ──────────────────────────────────────────────────────────── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.25rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* ── Layout ───────────────────────────────────────────────────────────── */
    --container-max:  1320px;
    --container-pad:  clamp(1rem, 4vw, 3rem);
    --header-height:  72px;
    --header-height-mobile: 60px;

    /* ── Border radius ────────────────────────────────────────────────────── */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-lg:   20px;
    --radius-xl:   28px;
    --radius-pill: 999px;

    /* ── Shadows ──────────────────────────────────────────────────────────── */
    --shadow-sm:          0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-card:        0 8px 40px rgba(0, 0, 0, 0.6);
    --shadow-glow:        0 0 24px rgba(232, 119, 34, 0.25);
    --shadow-glow-strong: 0 0 48px rgba(232, 119, 34, 0.4);
    --shadow-sidebar:     4px 0 24px rgba(0, 0, 0, 0.3);

    /* ── Transitions ──────────────────────────────────────────────────────── */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* ── Z-index layers ───────────────────────────────────────────────────── */
    --z-base:    1;
    --z-card:    10;
    --z-sticky:  100;
    --z-header:  200;
    --z-overlay: 300;
    --z-modal:   400;
    --z-toast:   500;
}