/*
 * Design tokens — Figma "Primo Vino WWW", page Dizainas (PLAN.md §2.2 + chrome audit).
 * Color custom-property names mirror the Figma style names.
 */
:root {
    /* Palette (Figma variables) */
    --ryski-raudona: #ee2737;  /* "Ryški raudona" — CTAs, cart pill, accents, hero/404 band */
    --sodri-raudona: #6a1414;  /* "Sodri raudona" — header, footer, drawer, dark tiles */
    --juoda: #1e1e1e;          /* "Juoda" — primary buttons, body text */
    --neutrali-pilka: #f0ebe9; /* "Neutrali pilka" — cards, dropdown hover pill, light icon tint */
    --sub: #e4dedb;            /* "Sub" — footer text/logo, beige panels */
    --neutrali: #faf8f7;       /* "Neutrali" — page background, light active pill */
    --sub-pilka: #969696;      /* "Sub pilka" — placeholders, secondary text */
    --balta: #ffffff;

    /*
     * A11y tint of Ryški raudona for SMALL text on Sodri raudona (footer column headings).
     * The design pair #ee2737-on-#6a1414 is 2.9:1 — fails WCAG AA 4.5:1 (axe serious).
     * This tint measures 5.1:1. Designer may swap the shade (PLAN §12 deferred #33).
     */
    --ryski-raudona-tint: #f68891;

    /*
     * A11y shade of Ryški raudona for SMALL text on white/--neutrali/--neutrali-pilka
     * (age-gate "NE" ghost button, product-card CTA link + discount badge on the default/gray
     * card background). #ee2737 on these backgrounds ranges 3.6–4.2:1 — fails WCAG AA 4.5:1
     * (axe serious). This darkening clears 4.5:1+ on all three. PLAN §12 deferred #33.
     */
    --ryski-raudona-shade: #cf2230;

    /*
     * A11y shade of Sub pilka for small secondary labels (filter/sort labels) on light page
     * backgrounds. #969696-on-#faf8f7 is 2.8:1 — fails WCAG AA 4.5:1 (axe serious). This
     * darkening measures 4.5:1+ against --neutrali and --balta. PLAN §12 deferred #33.
     */
    --sub-pilka-shade: #616161;

    /*
     * A11y shade of Ryški raudona for red backgrounds carrying non-"large" white/--neutrali text
     * (hero/category-hero band body copy at 16px; active subcategory tile label at 20px/400;
     * featured product-card's 14px CTA link). --neutrali-on-#ee2737 is 4.0:1 and
     * --balta-on-#ee2737 is 4.2:1 — both fail WCAG AA 4.5:1 (axe serious). This darkening clears
     * 4.5:1+ with both. Large text on the same backgrounds (e.g. 56px headings, 32px/300 +
     * 24px/600 product-card name/price) stays fine either way (3:1 threshold, already met at
     * 4.0:1+). PLAN §12 deferred #33.
     */
    --ryski-raudona-band: #dc2433;

    /* Off-palette colors seen in the chrome frames */
    --sekmes-zalia: #2ec27e;   /* success green — confirm exact value from frame at P5 (PLAN §2.2) */
    --linija-tamsi: #7f3333;   /* header/footer/drawer hairline dividers */
    --taskas-online: #07c881;  /* logged-in green dot on the person icon */

    /*
     * Type. Design font is Aktiv Grotesk (Dalton Maag) — proprietary, not licensed yet.
     * TODO(fonts): Inter (OFL) is the approved substitute (near-identical neo-grotesque metrics);
     * swap to Aktiv Grotesk woff2 once the client provides a license (KLAUSIMAI.md).
     */
    --font-sans: 'Inter', -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;

    /* Spacing scale */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;

    /* Layout */
    --container-max: 1140px;   /* desktop content container (x 294→1434 on 1728 frames) */
    --container-pad: 16px;     /* mobile side padding → 328px content on 360 frames */
    --header-h: 88px;          /* Component 18 */
    --header-h-compact: 48px;  /* Component 31 */
    --header-h-mobile: 84px;   /* Component 76 minus iOS status-bar mockup */

    /* Z-order (PLAN §6.1 stacking facts) */
    --z-header-sticky: 50;
    --z-dropdown: 60;
    --z-drawer: 100;
    --z-age-gate: 200;

    /* Surfaces */
    --shadow-panel: 0 0 20px rgba(0, 0, 0, .15);
    --radius-card: 16px;
    --radius-input: 8px;
    --radius-pill: 48px;
}