/**
 * CSS Variables and Design Tokens
 *
 * Design system for BARBRI Checkout/Storefront
 * Shared brand tokens from pe-b2b-prototype, adapted for public-facing site
 *
 * RULES:
 * - Bitter for headings, Nunito for body (NO OTHER FONTS)
 * - 8px spacing grid (8, 16, 24, 32, 40, 48, 56, 64)
 * - 4px half-step allowed but should be rare
 */

:root {
    /* ============================================
       COLOR PALETTE - Primary (BARBRI Blue)
       ============================================ */
    --color-primary: #2A5488;          /* BARBRI Blue */
    --color-primary-light: #3A6A9E;
    --color-primary-dark: #1E3D66;
    --color-primary-hover: #1E3D66;

    /* ============================================
       COLOR PALETTE - Neutrals (BARBRI Brand)
       BARBRI Rich Black: #001722
       BARBRI Body Charcoal: #464F57
       BARBRI Border Grey 1: #7E878E
       BARBRI Border Grey 2: #8C969E
       BARBRI Light Grey: #ECECEC
       ============================================ */
    --color-text-primary: #001722;     /* BARBRI Rich Black */
    --color-text-secondary: #464F57;   /* BARBRI Body Charcoal */
    --color-text-tertiary: #5C656D;    /* Darkened for WCAG AA contrast (was #7E878E) */
    --color-text-muted: #464F57;       /* BARBRI Body Charcoal */
    --color-text-disabled: #8C969E;    /* BARBRI Border Grey 2 */
    --color-text-inverse: #FFFFFF;     /* BARBRI White */

    /* ============================================
       COLOR PALETTE - Backgrounds
       ============================================ */
    --color-bg-page: #F8F9FA;
    --color-bg-card: #FFFFFF;
    --color-bg-hover: #F4F5F7;
    --color-bg-hover-blue: #E5ECF9;    /* BARBRI Light Blue - menu hovers */
    --color-bg-active: #ECECEC;        /* BARBRI Light Grey */
    --color-bg-selected: #E3F2FD;

    /* ============================================
       COLOR PALETTE - Borders
       ============================================ */
    --color-border-light: #ECECEC;     /* BARBRI Light Grey */
    --color-border-default: #8C969E;   /* BARBRI Border Grey 2 */
    --color-border-dark: #7E878E;      /* BARBRI Border Grey 1 */
    --color-border-focus: #2A5488;     /* BARBRI Blue */

    /* ============================================
       COLOR PALETTE - Links
       ============================================ */
    --color-link: #235BA8;             /* Standard link color */
    --color-link-hover: #1A4580;       /* Link hover (darker) */

    /* ============================================
       COLOR PALETTE - Status/Semantic
       ============================================ */
    --color-success: #447228;          /* Success green - confirmed states, checkmarks */
    --color-success-light: #E8F0E4;    /* Success background */
    --color-success-dark: #2D4C1A;     /* Darker success for contrast */

    --color-warning: #FFAB00;
    --color-warning-light: #FFF4E5;
    --color-warning-dark: #FF8B00;

    --color-error: #D44400;            /* Error red - error states, validation */
    --color-error-light: #FDEAE3;      /* Error background */
    --color-error-dark: #A53500;       /* Darker error for contrast */

    --color-info: #0065FF;
    --color-info-light: #DEEBFF;
    --color-info-dark: #0052CC;

    /* ============================================
       COLOR PALETTE - Selected State (Checkout)
       ============================================ */
    --color-bg-selected-light: #E5ECF9;  /* Light BARBRI blue for selected items */

    /* ============================================
       TYPOGRAPHY
       STRICT: Bitter for headings, Nunito for body
       NO OTHER FONTS unless explicitly approved
       ============================================ */
    --font-family-primary: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-heading: 'Bitter', serif;

    /* Font sizes (14, 16, 18, 20, 24, 28, 32, 40, 48, 56, 64, 72, 81) */
    --font-size-xs: 14px;
    --font-size-sm: 16px;
    --font-size-base: 18px;
    --font-size-md: 20px;
    --font-size-lg: 24px;
    --font-size-xl: 28px;
    --font-size-2xl: 32px;
    --font-size-3xl: 40px;
    --font-size-4xl: 48px;
    --font-size-5xl: 56px;
    --font-size-6xl: 64px;
    --font-size-7xl: 72px;
    --font-size-8xl: 81px;

    /* Font weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line heights */
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ============================================
       SPACING (8px grid - STRICT)
       Use 8px intervals: 8, 16, 24, 32, 40, 48, 56, 64
       4px half-step allowed but should be rare
       ============================================ */
    --space-0: 0;
    --space-1: 4px;    /* Half-step - use sparingly */
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 40px;
    --space-7: 48px;
    --space-8: 56px;
    --space-9: 64px;
    --space-10: 72px;
    --space-11: 80px;
    --space-12: 96px;
    --space-13: 112px;
    --space-14: 128px;

    /* ============================================
       BORDERS & RADIUS
       ============================================ */
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 3px;

    --radius-sm: 3px;
    --radius-default: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;

    /* ============================================
       SHADOWS
       ============================================ */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-default: 0 1px 3px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.15);
    --shadow-2xl: 0 12px 32px rgba(0, 0, 0, 0.2);

    /* Focus ring */
    --shadow-focus: 0 0 0 2px var(--color-primary);
    --shadow-focus-light: 0 0 0 2px rgba(42, 84, 136, 0.25);

    /* ============================================
       TRANSITIONS
       ============================================ */
    --transition-fast: 0.1s ease;
    --transition-default: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-all: all 0.2s ease;

    /* ============================================
       Z-INDEX SCALE
       ============================================ */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-toast: 800;

    /* ============================================
       LAYOUT - Storefront specific
       ============================================ */
    --header-height: 72px;
    --content-max-width: 1120px;
    --content-max-width-narrow: 800px;
    --content-max-width-wide: 1400px;

    /* ============================================
       FORM ELEMENTS
       ============================================ */
    --input-height-sm: 36px;
    --input-height-default: 44px;
    --input-height-lg: 52px;

    --input-padding-x: 16px;
    --input-padding-y: 12px;

    /* ============================================
       BUTTONS
       ============================================ */
    --btn-padding-x: 24px;
    --btn-padding-y: 12px;
    --btn-padding-x-sm: 16px;
    --btn-padding-y-sm: 8px;
    --btn-padding-x-lg: 32px;
    --btn-padding-y-lg: 16px;
}