/* app/static/css/base.css */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*::before,
*::after { box-sizing: border-box; }

:root{
  /*
  DESIGN RULES (NON-NEGOTIABLE)
  • Matte black background only
  • No bright yellow gold
  • No gradients on logos
  • No stretching or altering the lotus flower
  • No color substitutions
  • Follow hierarchy exactly (background → headline gold → soft gold → ivory)
  */
    /*
    PRIMARY BACKGROUND
    Bella Vie Matte Black
    HEX: #0E0E0E
    Use for: all label backgrounds, business card backgrounds, packaging, headers.
    */
    --color-bg: #F4EFE7;
    --color-navbar: rgba(46, 42, 39, 0.9); /* navbar same as bg with transparency */

    /* 
    PRIMARY ACCENT (LOGO + HEADLINES ONLY)
    Bella Vie Champagne Gold
    HEX: #C6AD7A
    Use for: Bella Vie logo text, lotus flower, product names, major headings.
    */
    --color-primary: #B7A374; 
    --color-headers: #B7A374;
    --color-text: #a5a49f;

    /*
    Gray: 827f75
    Gray: a5a49f
    Light Gray: d5d5d1
    Gray Yellow: 8d8362
    */

    /* 
    SECONDARY ACCENT (SUPPORTING TEXT)
    Bella Vie Soft Gold
    HEX: #B7A374
    Use for: secondary text, fine print, dividers, supporting copy on black backgrounds.
    */
    --color-accent: #a5a49f;

    /*
    UTILITY / CONTRAST ONLY
    Bella Vie Ivory
    HEX: #F3F1EB
    Use for: very small text, barcodes, regulatory icons only.
    Do NOT use for logos or headlines.
    */
    --color-utility: rgba(255, 255, 255, 0.02);


    /* Semantic Colors */
    --color-success: #10B981;           /* Green - Success states */
    --color-warning: #F59E0B;           /* Orange - Warnings */
    --color-error: #EF4444;             /* Red - Errors */
    --color-info: #3B82F6;              /* Blue - Info */
        
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    
    /* Typography */
    --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif;
    --font-mono: 'SF Mono', 'Monaco', 'Cascadia Code', 'Courier New', monospace;
    
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.875rem;    /* 30px */
    --font-size-4xl: 2.25rem;     /* 36px */
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    
    /* Spacing - 4px base unit */
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    
    
    /* Z-index scale */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-primary);
}