/*
 * Velento Shop — Design Tokens
 * Names here MUST match what layout/component CSS files consume
 * (e.g. layout/header.css reads var(--bg), var(--text), var(--accent)...).
 * Previously these were named --bg-color/--text-color/etc. while every
 * consumer expected --bg/--text/--accent, so nothing was actually
 * being styled. Keep the short names below as the single source of truth.
 */
:root {
    /* Colors — default (light) mode */
    --bg: #FAFAFA;
    --text: #0A0A0A;
    --primary: #0A0A0A;
    --secondary: #666666;
    --border: #e5e5e5;
    --accent: #C9A85B; /* gold accent */

    /* Radius */
    --radius: 12px;
    --radius-sm: 8px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Transition */
    --transition: .3s ease-in-out;
    --transition-fast: .15s ease-in-out;

    /* Spacing scale — 4px base unit, used across all component CSS
       (buttons, forms, cards, modal, slider) so every page shares the
       same rhythm instead of each file inventing its own pixel values. */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;
    --space-8: 64px;

    /* Typography scale */
    --text-xs: .75rem;    /* 12px — helper/error text */
    --text-sm: .875rem;   /* 14px — labels, meta */
    --text-base: 1rem;    /* 16px — body */
    --text-md: 1.125rem;  /* 18px */
    --text-lg: 1.375rem;  /* 22px — card/section titles */
    --text-xl: 1.75rem;   /* 28px */
    --text-2xl: 2.25rem;  /* 36px — page/hero titles */
    --leading-tight: 1.25;
    --leading-normal: 1.6;

    /* Elevation — soft shadows fit a light, luxury surface better than
       hard/dark ones; dark mode overrides to a lighter-alpha version below. */
    --shadow-sm: 0 1px 3px rgba(10, 10, 10, .06);
    --shadow-md: 0 8px 24px rgba(10, 10, 10, .08);
    --shadow-lg: 0 16px 40px rgba(10, 10, 10, .14);

    /* Z-index scale — keeps stacking order intentional as more overlays
       (modal, mobile nav, search, toasts) get added. */
    --z-header: 999;
    --z-overlay: 1000;
    --z-modal: 1100;
    --z-toast: 1200;
}

[data-theme="dark"] {
    /* Colors — dark (luxury) mode: black + olive green identity */
    --bg: #0A0A0A;
    --text: #FAFAFA;
    --primary: #FAFAFA;
    --secondary: #bdbdbd;
    --border: #2d2d2d;
    --accent: #D4B872; /* brighter gold for contrast on black */

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, .35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .55);
}
/* ==========================================================================
   Velento design tokens — redesigned Home / About / header / footer.
   Light is the designed look; [data-theme="dark"] keeps the theme toggle working.
   ========================================================================== */
:root {
    --vl-yellow: #FFC21F;
    --vl-yellow-soft: #FFE08A;
    --vl-gold: #E5A912;
    --vl-amber: #D98E04;
    --vl-orange: #D95F0E;
    --vl-blue: #3B82F6;
    --vl-dark: #232323;
    --vl-dark-2: #2E2E2E;

    --vl-page: #FFFFFF;
    --vl-surface: #FFFFFF;
    --vl-soft: #F4F4F4;
    --vl-cream: #FFF9E8;
    --vl-line: #ECECEC;
    --vl-text: #1F1F1F;
    --vl-muted: #6E6E6E;
    --vl-peach: #FDEDE3;
    --vl-shadow: 0 14px 40px rgba(20, 20, 20, .08);
    --vl-shadow-sm: 0 6px 18px rgba(20, 20, 20, .08);

    --vl-script: "Playball", "Great Vibes", "Snell Roundhand", "Segoe Script", "Brush Script MT", cursive;
}

[data-theme="dark"] {
    --vl-page: #121212;
    --vl-surface: #1C1C1C;
    --vl-soft: #262626;
    --vl-cream: #1D1A12;
    --vl-line: #303030;
    --vl-text: #F2F2F2;
    --vl-muted: #A9A9A9;
    --vl-peach: #2A211B;
    --vl-shadow: 0 14px 40px rgba(0, 0, 0, .45);
    --vl-shadow-sm: 0 6px 18px rgba(0, 0, 0, .4);
}