@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@700;800&family=Inter:wght@400;500;600;700&display=swap');

/**
 * AYIO Jobs - Design System
 * Single source of truth for all design tokens
 * Colors, typography, spacing, shadows, radii, transitions
 * Aligned with AYIO Sales (ayiosales.com.au) ecosystem design
 */

:root {
    /* ==================== Brand Colors ==================== */
    --primary-teal: #0d9488;
    --teal-dark: #0f766e;
    --secondary-navy: #0f1f3d;
    --accent-gold: #f0a500;
    --white: #ffffff;
    --light-gray: #f8f9fa;
    --dark-text: #1a1a1a;

    /* Navy Scale */
    --navy: #0f1f3d;
    --navy-light: #1a3460;
    --navy-lighter: #244a7a;
    --navy-dark: #08152a;
    --navy-darker: #040d1a;

    /* Gold Scale */
    --gold: #f0a500;
    --gold-light: #fbbf24;
    --gold-dark: #c8880a;
    --gold-darker: #a06f08;
    /* A11Y-N12 (2026-05-01): alias for body-text-on-white usage; passes WCAG AA 4.56:1 */
    --gold-text: #a06f08;

    /* ==================== Neutral Scale ==================== */
    --gray-50: #f8f9fa;
    --gray-100: #f1f3f5;
    --gray-200: #e9ecef;
    --gray-300: #dee2e6;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* ==================== Semantic Colors ==================== */
    --success: #16a34a;
    --error: #dc2626;
    --warning: #d97706;
    --info: #3b82f6;

    /* Semantic Tints (light backgrounds for alerts/badges) */
    --success-bg: #d1fae5;
    --success-text: #065f46;
    --success-border: #a7f3d0;
    --error-bg: #fee2e2;
    --error-text: #991b1b;
    --error-border: #fecaca;
    --warning-bg: #fef3c7;
    --warning-text: #92400e;
    --warning-border: #fcd34d;
    --info-bg: #dbeafe;
    --info-text: #1e40af;
    --info-border: #93c5fd;

    /* Tag/Badge Tint Colors (categorization badges, not status alerts) */
    --tint-blue-bg: #e8f4f8;
    --tint-blue-text: #0c5460;
    --tint-cyan-bg: #d1ecf1;
    --tint-cyan-text: #0c5460;
    --tint-green-bg: #d4edda;
    --tint-green-text: #155724;
    --tint-green-border: #c3e6cb;
    --tint-green-light-bg: #e8f5e9;
    --tint-green-light-text: #2e7d32;
    --tint-purple-bg: #e8d5f5;
    --tint-purple-text: #6f42c1;
    --tint-orange-bg: #fff3e0;
    --tint-orange-text: #e65100;
    --tint-danger-bg: #f8d7da;
    --tint-danger-text: #721c24;
    --tint-info-bg: #f0f7ff;
    --tint-info-border: #d0e3ff;
    --tint-cyan-border: #bee5eb;

    /* ==================== Typography ==================== */
    --font-heading: 'DM Sans', sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;

    /* ==================== Spacing ==================== */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* ==================== Shadows ==================== */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow: 0 2px 12px rgba(0,0,0,0.08);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
    --shadow-card-hover: 0 8px 30px rgba(15,31,61,0.15);

    /* ==================== Border Radius ==================== */
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ==================== Transitions ==================== */
    --transition-fast: 150ms ease;
    --transition: 200ms ease;
    --transition-slow: 300ms ease;

    /* ==================== Layout ==================== */
    --container-max: 1200px;
    --nav-height: 64px;
    --nav-height-mobile: 56px;

    /* ==================== Z-Index Scale ==================== */
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-header: 1000;
    --z-mobile-backdrop: 1500;
    --z-mobile-menu: 1600;
    --z-toast: 10000;
    --z-cookie-banner: 9999;
    --z-skip-link: 99999;

    /* ==================== Gradients ==================== */
    --hero-gradient: linear-gradient(135deg, #1a3461 0%, #1e3d6e 100%);

    /* ==================== Gold Utilities ==================== */
    --gold-hover: #d99400;
    --gold-glow: rgba(240, 165, 0, 0.15);
}