/* =====================================================
   TALACOTE DESIGN TOKENS
   Dark SaaS UI — Mobile-first
===================================================== */

:root {
    /* Colors — Core palette
     *
     * Apr 2026 contrast pass:
     *   Panel/soft alphas were originally 0.80–0.88 — too transparent over
     *   the stadium <body::before>. Bright spots in the stadium image
     *   (lights, sky) bled through and pulled the effective behind-text
     *   luminance up enough that --tc-muted (#9fb8e0, ~9:1 against pure
     *   dark) dropped to ~3.5:1 against the bleed-through. Bumping all
     *   panel alphas to ≥0.93 closes that gap without changing the
     *   visual intent (still has a hint of stadium showing through).
     */
    --tc-bg: rgba(11, 16, 32, 0.97);
    --tc-bg-alt: rgba(6, 12, 24, 0.97);
    --tc-panel: rgba(19, 27, 46, 0.95);
    --tc-soft: rgba(27, 38, 64, 0.93);
    /* `--tc-panel-solid` = drop-in replacement for inline `rgba(255,255,255,0.02-0.05)`
       ghost panels sprinkled across templates. Same role, but solid dark
       so muted text reads at a consistent contrast regardless of where the
       panel lands on the stadium image. */
    --tc-panel-solid: rgba(20, 28, 48, 0.92);
    --tc-line: rgba(255, 255, 255, 0.10);
    --tc-line-strong: rgba(255, 255, 255, 0.18);

    /* Text — May 2026 round 3: pushed to maximum contrast after user
       feedback "même le blanc actuel mérite d'être plus contrasté".
       Body text is now PURE white. text-secondary stays barely below
       (slight visual hierarchy without sacrificing legibility). muted
       is brought up close to body so descriptions / hints stop reading
       as "ghost text" — only marginally subdued, never washed-out.
       Contrast vs --tc-bg #040810: text 21:1 (AAA max), muted 18:1 (AAA). */
    --tc-text: #ffffff;
    --tc-text-secondary: #f5f9ff;
    --tc-muted: #e6edfb;

    /* Accent colors */
    --tc-green: #22c55e;
    --tc-green-dark: #16a34a;
    --tc-green-glow: rgba(34, 197, 94, 0.15);
    --tc-gold: #f5c451;
    --tc-gold-dark: #d4a338;
    --tc-gold-glow: rgba(245, 196, 81, 0.12);
    --tc-red: #ff6b6b;
    --tc-red-glow: rgba(255, 107, 107, 0.12);
    --tc-blue: #60a5fa;
    --tc-blue-glow: rgba(96, 165, 250, 0.12);

    /* Border radius */
    --tc-radius-sm: 10px;
    --tc-radius: 18px;
    --tc-radius-lg: 24px;
    --tc-radius-full: 999px;

    /* Typography */
    --tc-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --tc-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Spacing */
    --tc-space-xs: 4px;
    --tc-space-sm: 8px;
    --tc-space-md: 16px;
    --tc-space-lg: 24px;
    --tc-space-xl: 32px;
    --tc-space-2xl: 48px;
    --tc-space-3xl: 64px;

    /* Container */
    --tc-container-max: 1200px;
    --tc-container-padding: 20px;

    /* Shadows */
    --tc-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --tc-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --tc-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);
    --tc-shadow-glow-green: 0 0 20px rgba(34, 197, 94, 0.3);
    --tc-shadow-glow-gold: 0 0 20px rgba(245, 196, 81, 0.3);

    /* Transitions */
    --tc-transition: 0.2s ease;
    --tc-transition-slow: 0.4s ease;

    /* Z-indexes — refactored May 2026 audit (C4 + H5 + M9).
       Layer hierarchy bottom→top:
         dropdown < badge < sticky-cta < sticky < lang-banner < overlay
         < modal-content < modal-fm < modal-match < cookie-banner < toast
       Key fix: cookie-banner now sits ABOVE all modals so the GDPR
       consent flow can never be trapped beneath an upsell modal.
       match-gate.css + freemium-v2.css refer to these vars instead of
       hardcoded 9998/9999. */
    --tc-z-dropdown: 100;
    --tc-z-badge: 190;
    --tc-z-sticky-cta: 200;
    --tc-z-sticky: 210;
    --tc-z-lang-banner: 350;
    --tc-z-overlay: 400;
    --tc-z-modal: 500;
    --tc-z-modal-fm: 9998;
    --tc-z-modal-match: 9999;
    --tc-z-cookie: 10000;
    --tc-z-toast: 10010;
}

/* Breakpoints (reference only, use in media queries) */
/* Mobile:       0 - 479px  */
/* Phablet:    480 - 599px   */
/* Tablet:     600 - 767px   */
/* Desktop:    768 - 1023px  */
/* Wide:      1024px+        */