/* ==========================================================================
   Nutrabolt Brand Variables
   Based on Nutrabolt Brand Guidelines
   ========================================================================== */

:root {
    /* -------------------------------------------------------------------------
       PRIMARY PALETTE
       Black represents strength and perseverance
       White represents inclusivity, allyship, and for all
       Green represents health, growth, and nurturing
       ------------------------------------------------------------------------- */
    --nb-black: #0B080B;
    --nb-white: #FFFFFF;
    --nb-green: #87BE40;
    
    /* -------------------------------------------------------------------------
       SECONDARY PALETTE
       From brand accessibility guidelines
       ------------------------------------------------------------------------- */
    --nb-green-light: #B5DC47;
    --nb-green-muted: #7E9660;
    --nb-green-dark: #447336;
    --nb-teal: #1D4F44;
    --nb-teal-light: #426664;
    --nb-gray-light: #EBF0E6;
    --nb-gray: #70776D;
    --nb-forest: #314231;
    
    /* Legacy aliases for backward compatibility */
    --nutrabolt-green: var(--nb-green);
    --nutrabolt-black: var(--nb-black);
    --nutrabolt-white: var(--nb-white);
    --nutrabolt-gray: #5C5E5F;
    --nutrabolt-green-light: #9FD054;
    --nutrabolt-green-dark: #6FA230;
    --nutrabolt-gray-light: #8A8C8D;
    
    /* -------------------------------------------------------------------------
       TYPOGRAPHY
       GT America is the primary brand typeface
       Barlow is used as web fallback (similar characteristics)
       ------------------------------------------------------------------------- */
    --nb-font-primary: 'GT America', 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --nb-font-headline: 'GT America Compressed', 'Barlow Condensed', 'Barlow', sans-serif;
    
    /* Font weights */
    --nb-weight-regular: 400;
    --nb-weight-medium: 500;
    --nb-weight-semibold: 600;
    --nb-weight-bold: 700;
    --nb-weight-extrabold: 800;
    
    /* -------------------------------------------------------------------------
       SPACING
       ------------------------------------------------------------------------- */
    --nb-space-xs: 0.25rem;
    --nb-space-sm: 0.5rem;
    --nb-space-md: 1rem;
    --nb-space-lg: 1.5rem;
    --nb-space-xl: 2rem;
    --nb-space-2xl: 3rem;
    
    /* -------------------------------------------------------------------------
       BORDER RADIUS
       ------------------------------------------------------------------------- */
    --nb-radius-sm: 4px;
    --nb-radius-md: 8px;
    --nb-radius-lg: 12px;
    --nb-radius-xl: 16px;
    --nb-radius-pill: 24px;
    --nb-radius-round: 50%;
    
    /* -------------------------------------------------------------------------
       SHADOWS
       ------------------------------------------------------------------------- */
    --nb-shadow-sm: 0 2px 8px rgba(11, 8, 11, 0.08);
    --nb-shadow-md: 0 4px 20px rgba(11, 8, 11, 0.1);
    --nb-shadow-lg: 0 8px 30px rgba(11, 8, 11, 0.15);
    --nb-shadow-xl: 0 12px 40px rgba(11, 8, 11, 0.2);
    --nb-shadow-green: 0 6px 20px rgba(135, 190, 64, 0.4);
    
    /* -------------------------------------------------------------------------
       TRANSITIONS
       ------------------------------------------------------------------------- */
    --nb-transition-fast: 0.15s ease;
    --nb-transition-normal: 0.25s ease;
    --nb-transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* -------------------------------------------------------------------------
       Z-INDEX SCALE
       ------------------------------------------------------------------------- */
    --nb-z-dropdown: 100;
    --nb-z-sticky: 200;
    --nb-z-fixed: 500;
    --nb-z-modal-backdrop: 900;
    --nb-z-modal: 1000;
    --nb-z-tooltip: 1100;
}