/**
 * Design Tokens
 * Global CSS variables for the SCDA-2025 theme
 */

:root {
    /* ========================================
       COLORS
       ======================================== */
    
    /* Primary Colors */
    --color-scda-blue: #425563;
    --color-scda-blue-rgb: 66, 85, 99;
    --color-scda-blue-25: #D0D4D8;
    --color-scda-green: #A7BDB1;
    --color-scda-green-rgb: 167, 189, 177;
    --color-scda-green-25: #E9EEEB;
    --color-scda-tan: #C0745E;
    --color-scda-tan-25: #EFDCD7;
    --color-scda-beige: #FAF0E7;
    
    /* Secondary Colors */
    --color-scda-black: #51534A;
    --color-scda-black-rgb: 81, 83, 74;
    --color-scda-grey: #BBBCBC;
    --color-scda-grey-25: #EEEEEE;
    --color-scda-brown: #7C4D3A;
    --color-scda-brown-rgb: 124, 77, 58;
    
    /* UI System Colors */
    --color-scda-midnight: #253746;
    --color-scda-mud: #473728;
    --color-scda-grass: #799B4B;
    --color-scda-tomato: #9E3124;
    --color-scda-moss: #5B7755;
    --color-scda-moss-rgb: 91, 119, 85;
    --color-scda-moss-25: #D6DDD4;
    
    /* Utility Colors */
    --color-white: #FFFFFF;
    --color-white-rgb: 255, 255, 255;
    --color-text-dark: #424242;
    --color-text-medium: #494949;
    
    /* ========================================
       TYPOGRAPHY
       ======================================== */
    
    /* Font Families */
    --font-primary: 'Brandon Text', sans-serif;
    --font-heading: 'brandon-grotesque', sans-serif;
    
    /* ========================================
       SPACING
       ======================================== */
    
    --spacing-xs: 1.25rem; /* 20px */
    --spacing-sm: 1.875rem; /* 30px */
    --spacing-md: 3.125rem; /* 50px */
    --spacing-lg: 3.75rem; /* 60px */
    --spacing-xl: 5rem; /* 80px */
    --spacing-xxl: 6.25rem; /* 100px */
    
    /* ========================================
       LAYOUT
       ======================================== */
    
    --border-radius: 0.5rem; /* 8px */
    
    /* ========================================
       BREAKPOINTS
       ======================================== */
    
    --breakpoint-mobile: 576px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 991px;
    --breakpoint-wide: 1200px;
}