/* ===================================================================
   DESIGN TOKENS
   CSS Custom Properties for consistent theming
   =================================================================== */

/* Fonts loaded via <link> in HTML for non-blocking performance */

:root {
     /* ================================================================
        TYPOGRAPHY - Font Families
        ================================================================ */
     --font-heading: 'Montserrat', sans-serif;
     --font-body: 'Roboto', 'Montserrat', sans-serif;

     /* ================================================================
        TYPOGRAPHY - Font Sizes (Desktop)
        Curated scale: 4px/8px grid-aligned
        ================================================================ */
     --font-size-xs: 0.75rem;     /* 12px - hints, captions */
     --font-size-sm: 0.875rem;    /* 14px - small text */
     --font-size-base: 1rem;      /* 16px - base */
     --font-size-md: 1.125rem;    /* 18px - body text */

     --font-size-lg: 1.25rem;       /* 20px - h4, large body */

     --font-size-xl: 1.5rem;        /* 24px - h3 */

     --font-size-2xl: 2rem;        /* 32px - h2 */
     --font-size-3xl: 2.5rem;      /* 40px - h1 */
     --font-size-display: 4rem;    /* 64px - decorative numbers */

     /* ================================================================
        TYPOGRAPHY - Font Sizes (Mobile)
        Optimized for touch interfaces with proper viewport
        ================================================================ */
     --font-size-mobile-sm: 0.875rem;   /* 14px */
     --font-size-mobile-base: 1rem;     /* 16px */
     --font-size-mobile-lg: 1.125rem;   /* 18px - h3 */
     --font-size-mobile-xl: 1.25rem;    /* 20px - h2 */
     --font-size-mobile-2xl: 1.5rem;    /* 24px - h1 */
     --font-size-mobile-display: 2.5rem; /* 40px */

     /* ================================================================
        TYPOGRAPHY - Font Weights
        ================================================================ */
     --font-weight-light: 300;
     --font-weight-normal: 400;
     --font-weight-semibold: 600;
     --font-weight-bold: 700;
     --font-weight-black: 900;

     /* ================================================================
        TYPOGRAPHY - Letter Spacing
        ================================================================ */
     --letter-spacing-tight: 1px;
     --letter-spacing-normal: 2px;
     --letter-spacing-wide: 3px;
     --letter-spacing-wider: 4px;

     /* ================================================================
        TYPOGRAPHY - Line Heights
        ================================================================ */
     --line-height-none: 1;
     --line-height-tight: 1.4;
     --line-height-normal: 1.5;
     --line-height-body: 1.6;
     --line-height-relaxed: 2;

     /* ================================================================
        BREAKPOINTS
        
        CSS custom properties cannot be used in @media queries.
        This documents the consistent breakpoint convention:
        
        Mobile:  @media (max-width: 1023px)  - phones, small tablets
        Desktop: @media (min-width: 1024px)  - tablets landscape, laptops, desktops
        
        The 1024px threshold aligns with iPad landscape (1024×768).
        Always use these exact values for consistency.
        ================================================================ */

     /* ================================================================
        MOTION
        ================================================================ */
     --motion-fast: 280ms;
     --motion-medium: 480ms;
     --motion-slow: 900ms;
     --motion-ease: cubic-bezier(0.2, 0, 0, 1);

     /* ================================================================
        SHADOWS (Material elevation)
        ================================================================ */
     --shadow-1: 0 2px 6px rgba(0, 0, 0, 0.18);
     --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.22);
     --shadow-3: 0 12px 28px rgba(0, 0, 0, 0.26);
     --shadow-modal: 0 4px 20px rgba(0, 0, 0, 0.2);

     /* ================================================================
        GLASS MORPHISM
        ================================================================ */
     --glass-background: var(--accent-50);
     --glass-backdrop-filter: blur(12px) saturate(110%);
     --glass-border: 1px solid var(--accent-100);
     --glass-border-radius: 12px;

     /* ================================================================
        SPACING SCALE (4px/8px grid)
        ================================================================ */
     --spacing-xs: 4px;
     --spacing-sm: 8px;
     --spacing-md: 12px;
     --spacing-lg: 16px;
     --spacing-xl: 24px;
     --spacing-2xl: 32px;
     --spacing-3xl: 40px;
     --spacing-4xl: 48px;
     --spacing-5xl: 64px;
     --spacing-6xl: 96px;

     /* ================================================================
        COLOR PRIMITIVES - Raw palette values
        ================================================================ */
     
     /* Neutral scale (gray) */
     --gray-0: #ffffff;
     --gray-50: #fafafa;
     --gray-100: #f5f5f5;
     --gray-200: #eeeeee;
     --gray-300: #e0e0e0;
     --gray-400: #cccccc;
     --gray-500: #9e9e9e;
     --gray-600: #757575;
     --gray-700: #616161;
     --gray-800: #424242;
     --gray-900: #212121;
     --gray-1000: #000000;
     
     /* Brand - Primary (deep teal/navy) */
     --brand-900: #04293c;
     --brand-800: #063a52;
     --brand-700: #134169;
     --brand-600: #1a5a8a;
     --brand-500: #0069b4;
     --brand-400: #3d8bc7;
     --brand-300: #73a2b0;
     --brand-200: #b0bfca;
     --brand-100: #d4e3ec;
     --brand-50: #e8f4fc;
     
     /* Accent - Glass/sky blue */
     --accent-500: rgb(99, 190, 255);
     --accent-100: rgba(99, 190, 255, 0.2);
     --accent-50: rgba(99, 190, 255, 0.1);
     
     /* Success (green) - WCAG AAA compliant */
     --success-700: #145a1f;                          /* 8.78:1 on white ✓ AAA */
     --success-500: #1a7a28;                          /* 5.5:1 - use 700 for text */
     --success-100: rgba(26, 122, 40, 0.1);
     
     /* Error (red) - WCAG AAA compliant */
     --error-700: #8b0000;                            /* 10.17:1 on white ✓ AAA */
     --error-500: #a11212;                            /* 7.13:1 on white ✓ AAA */
     --error-100: rgba(161, 18, 18, 0.1);
     
     /* ================================================================
        SEMANTIC COLORS - Purpose-based tokens
        ================================================================ */
     
     /* Backgrounds */
     --color-bg-page: var(--gray-300);
     --color-bg-surface: var(--gray-0);
     --color-bg-elevated: var(--gray-0);
     --color-bg-muted: var(--gray-100);
     --color-bg-input: var(--gray-50);
     --color-bg-code: var(--gray-100);
     --color-bg-overlay-light: rgba(0, 0, 0, 0.12);
     --color-bg-overlay-medium: rgba(0, 0, 0, 0.2);
     --color-bg-overlay: rgba(0, 0, 0, 0.5);
     --color-bg-overlay-heavy: rgba(0, 0, 0, 0.95);
     --color-bg-header: rgba(19, 65, 105, 0.4);
     --color-bg-header-hover: rgba(19, 65, 105, 0.7);
     --color-bg-footer: rgba(0, 0, 0, 0.4);
     --color-bg-scrollbar: var(--gray-100);
     
     /* Text - WCAG AAA compliant (7:1 minimum on white) */
     --color-text-primary: var(--brand-900);          /* #04293c = 14.83:1 ✓ */
     --color-text-secondary: var(--gray-800);         /* #424242 = 9.68:1 ✓ */
     --color-text-muted: #2e545e;                     /* 7.05:1 on white ✓ AAA */
     --color-text-disabled: #525252;                  /* 7.0:1 on white ✓ AAA */
     --color-text-hint: var(--gray-800);              /* #424242 = 9.68:1 ✓ AAA */
     --color-text-inverse: var(--gray-0);
     --color-text-table-header: var(--gray-700);      /* #616161 = 5.91:1 (AA for large text) */
     
     /* Borders */
     --color-border-default: var(--gray-400);
     --color-border-subtle: var(--gray-200);
     --color-border-input: var(--gray-300);
     --color-border-input-hover: var(--brand-200);
     --color-border-focus: var(--brand-500);
     
     /* Interactive - WCAG AAA compliant */
     --color-link: #004d85;                           /* 7.82:1 on white ✓ AAA */
     --color-link-hover: var(--brand-900);            /* 14.83:1 on white ✓ AAA */
     --color-focus-ring: rgba(0, 77, 133, 0.25);
     --color-focus-outline: #004d85;                  /* High contrast blue for dark backgrounds */
     --color-focus-outline-dark: #1a1a1a;             /* For light backgrounds */
     --color-ripple: rgba(255, 255, 255, 0.35);
     
     /* Feedback */
     --color-success: var(--success-500);
     --color-success-dark: var(--success-700);
     --color-success-bg: var(--success-100);
     --color-error: var(--error-500);
     --color-error-dark: var(--error-700);
     --color-error-bg: var(--error-100);
     
     /* Components */
     --color-close-btn: rgba(4, 41, 60, 0.15);
     --color-close-btn-hover: rgba(4, 41, 60, 0.3);
     --color-shadow-inset: rgba(0, 0, 0, 0.02);
     --color-nav-separator: rgba(255, 255, 255, 0.15);
     --color-hover-glow-start: rgba(255, 255, 255, 0.18);
     --color-hover-glow-end: rgba(19, 65, 105, 0.18);
     --color-tab-active: var(--gray-800);
     
     /* Legacy aliases (for backward compatibility) */
     --color-white: var(--gray-0);
     --color-bg-light: var(--gray-300);
     --color-bg-white: var(--gray-0);
     --color-text-dark: var(--brand-900);
     --color-text-dark-hover: var(--brand-800);
     --color-text-medium: var(--gray-800);
     --color-text-light: var(--brand-700);
     --color-border-light: var(--gray-400);
     --color-border-faint: var(--gray-200);
     --color-brand-blue: #004d85;                     /* AAA compliant: 7.82:1 on white */
     --color-header-bg: var(--color-bg-header);
     --color-overlay: var(--color-bg-overlay);
     --color-nav-black: var(--gray-1000);
     --color-nav-overlay-bg: var(--color-bg-overlay-heavy);
     --color-nav-hover: #b8c4c8;                      /* Light gray for hover on dark nav: 9.5:1 on black */
     --color-footer-bg: var(--color-bg-footer);

     /* ================================================================
        BORDER RADIUS
        ================================================================ */
     --radius-none: 0;
     --radius-sm: 4px;
     --radius-md: 8px;
     --radius-lg: 12px;
     --radius-xl: 24px;
     --radius-pill: 999px;
     --radius-circle: 50%;

     /* ================================================================
        FORMS
        ================================================================ */
     --form-input-padding: var(--spacing-lg) var(--spacing-xl);
     --form-input-padding-mobile: var(--spacing-2xl);
     --form-min-width: 600px;
     --form-textarea-min-height: 180px;

     /* ================================================================
        TRANSFORMS (Hover lifts)
        ================================================================ */
     --lift-sm: -1px;
     --lift-md: -4px;
     --lift-lg: -8px;

     /* ================================================================
        LAYOUT
        ================================================================ */
     --hero-height: 25vh;
     --hero-min-height: 400px;
     --hero-height-mobile: 40vh;
     --section-content-width: 60vw;
     --bg-size-desktop: 205%;
     --bg-size-mobile: 505%;
     
     /* Hairlines & separators */
     --border-hairline: 1px;
     --triangle-mobile: 100px;
     
     /* Scrollbar */
     --scrollbar-thumb-min: 60px;

     /* ================================================================
        TEAM CARDS
        ================================================================ */
     --team-card-min-width: 480px;
     --team-card-image-size: 300px;
     --team-card-image-size-mobile: 80vw;

     /* ================================================================
        ICONS
        ================================================================ */
     --icon-hero: 8rem;
     --icon-card: 6rem;
     --icon-card-mobile: 12rem;
     --icon-quote: 12vw;
     --icon-quote-mobile: 30vw;

     /* ================================================================
        ANIMATIONS
        ================================================================ */
     --anim-offset: 20px;
     --anim-offset-negative: -20px;
     --motion-extra-slow: 2s;
     
     /* Stagger scale (50ms increments) */
     --anim-stagger-1: 100ms;
     --anim-stagger-2: 150ms;
     --anim-stagger-3: 200ms;
     --anim-stagger-4: 250ms;
     --anim-stagger-5: 300ms;
     --anim-stagger-6: 350ms;
     --anim-stagger-7: 400ms;
     --anim-stagger-8: 500ms;

     /* ================================================================
        Z-INDEX SCALE
        ================================================================ */
     --z-tab-links: 90;
     --z-header: 100;
     --z-nav-overlay: 998;
     --z-burger-menu: 1000;

     /* ================================================================
        NAVIGATION
        ================================================================ */
     --nav-height: 72px;
     --nav-height-mobile: 64px;
     --nav-blur: blur(12px);
     --nav-transition: var(--motion-fast) ease-in-out;
     --nav-brand-width: 156px;
     --nav-gap-desktop: var(--spacing-4xl);

     /* ================================================================
        BURGER MENU
        ================================================================ */
     --burger-size: 3rem;
     --burger-line-width: 1.5rem;
     --burger-line-height: 3px;
     --burger-line-offset: 7px;
     --burger-line-offset-negative: -7px;

     /* ================================================================
        BUTTONS
        ================================================================ */
   --btn-padding-mobile: var(--spacing-sm) var(--spacing-lg);
     --btn-padding-desktop: var(--spacing-sm) var(--spacing-3xl);
   --btn-font-size-mobile: var(--font-size-mobile-sm);
     --btn-font-size-desktop: var(--font-size-base);
     --btn-line-height: var(--line-height-tight);
}