/* ============================================
   PIZJO — Design Tokens (v5 Cheesy Underground)
   Grunge Aesthetic, Hard Shadows, Neon Accents
   ============================================ */

/* Fonts loaded via <link rel="preload"> in index.html for non-blocking render */

:root {
    /* ── 1. Color Palette ── */
    --amber-neon: #FFBF00;
    --umber-raw: #3E2723;
    --off-white: #F5F2EB;

    /* Backgrounds */
    --color-bg: var(--off-white);
    --color-surface: var(--off-white);
    --color-surface-hover: rgba(255, 191, 0, 0.2);

    /* Accents */
    --color-primary: var(--amber-neon);
    --color-primary-dark: #E5AB00;
    --color-primary-light: #FFCF33;

    /* Text */
    --color-text: var(--umber-raw);
    --color-text-secondary: #4A3B2C;
    --color-text-muted: rgba(62, 39, 35, 0.6);
    --color-text-inverse: var(--umber-raw);
    /* Grunge style uses dark text on neon */

    /* Semantic / Highlights */
    --color-veg: #0F8A65;
    --color-border: var(--umber-raw);
    --color-whatsapp: #25D366;

    /* Additional Colors */
    --color-brand-blue: var(--umber-raw);
    --color-brand-orange: var(--amber-neon);

    /* ── 2. Typography ── */
    --font-display: 'Bricolage Grotesque', sans-serif;
    --font-body: 'Hanken Grotesk', sans-serif;
    --font-marker: 'Permanent Marker', cursive;
    --font-scribble: 'Caveat', cursive;

    /* Scale (Perfect Fourth) */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.333rem;
    --text-2xl: 1.777rem;
    --text-3xl: 2.369rem;
    --text-4xl: 3.157rem;
    --text-5xl: 4.209rem;
    --text-6xl: 5.61rem;
    --text-7xl: 7.478rem;

    /* Line Heights */
    --leading-tight: 0.9;
    /* Tighter for display text */
    --leading-normal: 1.5;
    --leading-relaxed: 1.6;

    /* ── 3. Spacing (4px grid) ── */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;
    --space-5xl: 128px;
    --space-6xl: 192px;

    /* ── 4. Architecture ── */
    --nav-height: 80px;
    --radius-sm: 0px;
    /* Grunge is sharp */
    --radius-md: 0px;
    --radius-lg: 0px;
    --radius-xl: 0px;
    --radius-full: 0px;
    --max-width: 1400px;
    --z-base: 1;
    --z-sticky: 100;
    --z-float: 900;
    /* floating WhatsApp layer: below cart modal, above sticky nav */
    --z-modal: 1000;

    /* ── 5. Motion (12 Principles) ── */
    /* timing-under-300ms */
    --duration-fast: 150ms;
    --duration-normal: 250ms;
    /* Under 300ms */
    --duration-slow: 300ms;

    /* easing-entrance-ease-out */
    --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1);
    /* easing-exit-ease-in */
    --ease-in: cubic-bezier(0.4, 0.0, 1, 1);

    /* physics-active-state */
    --squish-scale: 0.98;

    /* Shadows & Effects (Grunge style) */
    --shadow-grunge: 4px 4px 0px 0px var(--umber-raw);
    --shadow-grunge-lg: 8px 8px 0px 0px var(--umber-raw);
    --shadow-grunge-hover: 2px 2px 0px 0px var(--umber-raw);
    --border-thick: 4px solid var(--umber-raw);
}

/* Global resets specifically dependent on tokens */
html {
    scroll-behavior: smooth;
    /* Keep anchor targets clear of the fixed navbar (+ breathing room) */
    scroll-padding-top: calc(var(--nav-height) + var(--space-xl));
    background-color: var(--color-bg);
    color: var(--color-text);
    overflow-x: clip;
}

::selection {
    background: var(--amber-neon);
    color: var(--umber-raw);
}

/* ── 6. Mobile Type Scale (≤768px) ──
   The desktop scale is huge (up to 120px). On phones it breaks
   every layout. We scale the whole type ramp down so the same
   grunge design fits small screens. All components use these
   tokens, so this cascades everywhere automatically. */
@media (max-width: 768px) {
    :root {
        --text-xs: 0.7rem;
        --text-sm: 0.8rem;
        --text-base: 0.95rem;
        --text-lg: 1.05rem;
        --text-xl: 1.2rem;
        --text-2xl: 1.5rem;
        --text-3xl: 1.9rem;
        --text-4xl: 2.4rem;
        --text-5xl: 3rem;
        --text-6xl: 3.6rem;
        --text-7xl: 4.5rem;
        --nav-height: 64px;
        --space-4xl: 64px;
        --space-5xl: 80px;
        --space-6xl: 120px;
    }
}

/* ── 7. Small Phone Type Scale (≤480px) ── */
@media (max-width: 480px) {
    :root {
        --text-3xl: 1.7rem;
        --text-4xl: 2.1rem;
        --text-5xl: 2.6rem;
        --text-6xl: 3.1rem;
        --text-7xl: 3.8rem;
        --nav-height: 60px;
    }
}