/**
 * Design Tokens
 * Global CSS variables for the Palmetto Rail theme
 */

:root {
    /* ========================================
       COLORS
       ======================================== */
    --color-primary: var(--color-blue);
    --color-primary-rgb: var(--color-blue-rgb);

    --color-blue: #002F5F;
    --color-blue-rgb: 0, 47, 95;
    --color-light-blue: #003D7D;
    --color-light-blue-rgb: 0, 61, 125;
    --color-red: #CF0A2C;
    --color-red-rgb: 207, 10, 44;
    --color-green: #1AA288;
    --color-green-rgb: 26, 162, 136;
    --color-gray: #808080;
    --color-gray-rgb: 128, 128, 128;
    --color-dark-gray: #414042;
    --color-dark-gray-rgb: 65, 64, 66;
    --color-white: #FFFFFF;
    --color-white-rgb: 255, 255, 255;
    --color-black: #000000;
    --color-black-rgb: 0, 0, 0;

    /* ========================================
       TYPOGRAPHY
       ======================================== */
    --sans: 'franklin-gothic-atf', sans-serif;
    
    /* Font sizes */
    --text-xs: 0.75rem; /* 12px */
    --text-sm: 0.875rem; /* 14px */
    --text-base: 1rem; /* 16px */
    --text-lg: 1.125rem; /* 18px */
    --text-xl: 1.25rem; /* 20px */
    
    /* Line heights */
    --leading-tight: 1.2;
    --leading-normal: 1.4;
    --leading-relaxed: 1.6;
    
    /* ========================================
       SPACING SCALE
       Numeric scale (1-11) + semantic aliases
       ======================================== */
    --spacing-1: .25rem; /* 4px */
    --spacing-2: .5rem; /* 8px */
    --spacing-3: .75rem; /* 12px */
    --spacing-4: 1.5rem; /* 24px */
    --spacing-5: 2rem; /* 32px */
    --spacing-6: 2.5rem; /* 40px */
    --spacing-7: 3rem; /* 48px */
    --spacing-8: 3.5rem; /* 56px */
    --spacing-9: 4rem; /* 64px */
    --spacing-10: 5rem; /* 80px */
    --spacing-11: 6.25rem; /* 100px */

    --spacing-xxs: var(--spacing-1);
    --spacing-xs: var(--spacing-3);
    --spacing-sm: var(--spacing-5);
    --spacing-md: var(--spacing-7);
    --spacing-lg: var(--spacing-9);
    --spacing-xl: var(--spacing-10);
    --spacing-xxl: var(--spacing-11);

    /* ========================================
       LAYOUT
       ======================================== */
    --container-width: 1280px;
    --content-width: 620px;
    --column-width: 360px;
    
    /* Border radius */
    --radius-none: 0;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    
    /* Shadows */
    --shadow-sm: 0px 2px 8px rgba(0, 47, 95, 0.15);
    --shadow-md: 0px 4px 16px rgba(0, 47, 95, 0.25);
    --shadow-lg: 0px 8px 32px rgba(0, 47, 95, 0.35);
    
    /* Transitions */
    --transition-fast: 0.15s ease-in-out;
    --transition-base: 0.2s ease-in-out;
    --transition-slow: 0.3s ease-in-out;
    
    /* Z-index scale */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-overlay: 1000;
    --z-modal: 1001;
    --z-tooltip: 1002;

    /* ========================================
       GRADIENTS
       ======================================== */
    --gradient-white: linear-gradient(to right, rgba(var(--color-white-rgb), 0), var(--color-white), rgba(var(--color-white-rgb), 0));
    --gradient-white-vertical: linear-gradient(to bottom, rgba(var(--color-white-rgb), 0), var(--color-white), rgba(var(--color-white-rgb), 0));
    --gradient-white-mobile: linear-gradient(to right, var(--color-white), rgba(var(--color-white-rgb), 0));
    --gradient-red: linear-gradient(to right, rgba(var(--color-red-rgb), 0), var(--color-red), rgba(var(--color-red-rgb), 0));
    --gradient-blue: linear-gradient(to bottom, var(--color-blue), var(--color-light-blue), var(--color-blue));
}