/* ==========================================================================
   GIVORA - DESIGN SYSTEM TOKENS & VARIABLES
   Premium Artisan Keripik Pisang & Singkong
   ========================================================================== */

:root {
    /* Brand Primary (Artisan Maroon & Warm Wine) */
    --brand-primary: #7A1024;
    --brand-primary-dark: #4F0815;
    --brand-primary-light: #9B1731;
    --brand-primary-subtle: #FDF2F4;

    /* Accent Colors (Golden Honey & Crunchy Amber) */
    --accent-gold: #F59E0B;
    --accent-gold-dark: #D97706;
    --accent-gold-light: #FEF3C7;
    --accent-gold-subtle: #FFFBEB;

    /* Secondary Accents */
    --accent-choco: #5B2B1B;
    --accent-matcha: #4A6E24;
    --accent-spicy: #DC2626;
    --accent-green: #10B981;
    --accent-green-light: #D1FAE5;

    /* Backgrounds & Surfaces */
    --bg-page: #FAF6F0;
    --bg-surface: #FFFFFF;
    --bg-surface-alt: #F4ECE1;
    --bg-card: #FFFFFF;
    --bg-card-subtle: #FAF7F2;

    /* Typography Colors */
    --text-primary: #240E13;
    --text-secondary: #4A3337;
    --text-muted: #7E6569;
    --text-inverted: #FFFFFF;

    /* Borders & Dividers */
    --border-light: #EBDED2;
    --border-subtle: #F1E9DF;
    --border-focus: #7A1024;

    /* Typography */
    --font-heading: 'Outfit', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

    /* Elevated Shadows */
    --shadow-xs: 0 1px 3px rgba(79, 8, 21, 0.05);
    --shadow-sm: 0 4px 6px -1px rgba(79, 8, 21, 0.07), 0 2px 4px -2px rgba(79, 8, 21, 0.05);
    --shadow-md: 0 10px 15px -3px rgba(79, 8, 21, 0.08), 0 4px 6px -4px rgba(79, 8, 21, 0.04);
    --shadow-lg: 0 20px 25px -5px rgba(79, 8, 21, 0.1), 0 8px 10px -6px rgba(79, 8, 21, 0.04);
    --shadow-glow: 0 0 25px rgba(245, 158, 11, 0.25);
    --shadow-primary: 0 8px 20px rgba(122, 16, 36, 0.25);

    /* Radii */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 28px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    --transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}