/* ==========================================================================
   VARIABLES.CSS — Design Tokens — Pontual Parabrisas
   O ÚNICO arquivo que muda de tema para tema.
   Cores amostradas do flyer oficial: #002C78 (azul) / #E6C157 (dourado).
   ========================================================================== */
:root {
    /* ─── CORES PRINCIPAIS ──────────────────────────────────────────── */
    --pp-blue:          #002C78;
    --pp-blue-dark:     #001E54;
    --pp-blue-medium:   #0A3D8F;
    --pp-blue-light:    #1A4FA0;
    --pp-gold:          #E6C157;
    --pp-gold-dark:     #C9A63A;
    --pp-gold-light:    #F0D47A;
    --pp-white:         #FFFFFF;
    --pp-off-white:     #F4F7FB;

    /* ─── TEXTO ──────────────────────────────────────────────────────── */
    --pp-text:          #FFFFFF;
    --pp-text-muted:    #A8BDD6;
    --pp-text-dark:     #1A2035;

    /* ─── SUPERFÍCIES ────────────────────────────────────────────────── */
    --pp-surface:       #0A1E42;
    --pp-border:        rgba(255, 255, 255, 0.12);
    --pp-border-gold:   rgba(230, 193, 87, 0.3);
    --pp-overlay:       rgba(0, 20, 72, 0.80);

    /* ─── GRADIENTES ─────────────────────────────────────────────────── */
    --pp-gradient-gold: linear-gradient(135deg, #F0D47A 0%, #E6C157 50%, #C9A63A 100%);
    --pp-gradient-blue: linear-gradient(180deg, #002C78 0%, #001E54 100%);

    /* ─── TIPOGRAFIA ─────────────────────────────────────────────────── */
    --font-body:        'Inter', system-ui, sans-serif;
    --font-heading:     'Barlow Condensed', system-ui, sans-serif;

    /* ─── FORMA ──────────────────────────────────────────────────────── */
    --radius-sm:    6px;
    --radius-md:    10px;
    --radius-lg:    16px;
    --radius-xl:    24px;
    --radius-full:  9999px;
    --radius-btn:   8px;
    --radius-card:  16px;

    /* ─── SOMBRAS ────────────────────────────────────────────────────── */
    --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.20);
    --shadow-md:    0 4px 20px rgba(0, 0, 0, 0.35);
    --shadow-lg:    0 8px 40px rgba(0, 0, 0, 0.45);
    --shadow-card:  0 10px 30px rgba(0, 0, 0, 0.35);
    --shadow-gold:  0 4px 20px rgba(230, 193, 87, 0.35);

    /* ─── TRANSIÇÕES ─────────────────────────────────────────────────── */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* ─── LAYOUT ─────────────────────────────────────────────────────── */
    --container-max:     1200px;
    --container-padding: 1rem;
    --header-height:     70px;

    /* ─── Z-INDEX ────────────────────────────────────────────────────── */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-fab:      500;
}