/* ========================================
   CSS Design Tokens
   Color palette, spacing, typography
   ======================================== */

:root {
    /* === Color Palette === */

    /* Primary Colors (Soft Blue) */
    --color-primary: #5FAAD9;
    --color-primary-hover: #4A8FB8;
    --color-primary-light: #E8F4FA;
    --color-primary-dark: #3D7A9B;

    /* Secondary Colors (Coral Red) */
    --color-secondary: #F25C5C;
    --color-secondary-hover: #D94545;
    --color-secondary-light: #FDEAEA;
    --color-secondary-dark: #C03838;

    /* Tertiary Colors */
    --color-tertiary-teal: #78BFB8;
    --color-tertiary-teal-hover: #5FA79F;
    --color-tertiary-teal-light: #EBF7F6;
    --color-tertiary-teal-dark: #4D9A92;

    --color-tertiary-gold: #F2BE5C;
    --color-tertiary-gold-hover: #D9A545;
    --color-tertiary-gold-light: #FDF6E8;
    --color-tertiary-gold-dark: #C09038;

    /* Success (Using Teal) */
    --color-success: #78BFB8;
    --color-success-hover: #5FA79F;
    --color-success-light: #EBF7F6;
    --color-success-dark: #4D9A92;

    /* Danger/Error (Using Secondary) */
    --color-danger: #F25C5C;
    --color-danger-hover: #D94545;
    --color-danger-light: #FDEAEA;
    --color-danger-dark: #C03838;

    /* Warning (Using Gold) */
    --color-warning: #F2BE5C;
    --color-warning-hover: #D9A545;
    --color-warning-light: #FDF6E8;
    --color-warning-dark: #C09038;

    /* Info (Using Primary) */
    --color-info: #5FAAD9;
    --color-info-light: #E8F4FA;
    --color-info-dark: #3D7A9B;

    /* Exam Mode (Using Secondary Red) */
    --color-exam: #F25C5C;
    --color-exam-hover: #D94545;

    /* Neutral Grays */
    --color-dark: #2c3e50;
    --color-gray: #7f8c8d;
    --color-gray-medium: #95a5a6;
    --color-gray-light: #ecf0f1;
    --color-gray-lighter: #f8f9fa;
    --color-border: #e0e0e0;
    --color-border-light: #ddd;
    --color-border-dark: #eee;

    /* Background Colors */
    --color-bg-body: #f4f4f4;
    --color-bg-white: #ffffff;
    --color-bg-nav: #333333;
    --color-bg-code: #f4f4f4;
    --color-bg-code-block: #2c3e50;

    /* Text Colors */
    --color-text-primary: #2c3e50;
    --color-text-secondary: #7f8c8d;
    --color-text-muted: #6c757d;
    --color-text-light: #ecf0f1;
    --color-text-white: #ffffff;
    --color-text-body: #333333;

    /* Link Colors */
    --color-link: #5FAAD9;
    --color-link-hover: #4A8FB8;

    /* Gradient Colors */
    --gradient-hero: linear-gradient(135deg, #5FAAD9 0%, #78BFB8 100%);
    --gradient-progress: linear-gradient(90deg, #78BFB8, #5FAAD9);
    --gradient-accent: linear-gradient(135deg, #F2BE5C 0%, #F25C5C 100%);

    /* === Spacing === */
    --spacing-xs: 0.25rem;     /* 4px */
    --spacing-sm: 0.5rem;      /* 8px */
    --spacing-md: 1rem;        /* 16px */
    --spacing-lg: 1.5rem;      /* 24px */
    --spacing-xl: 2rem;        /* 32px */
    --spacing-2xl: 3rem;       /* 48px */

    /* === Border Radius === */
    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --radius-round: 12px;

    /* === Typography === */
    --font-family-base: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-heading: 'Poppins', sans-serif;
    --font-family-mono: 'Consolas', 'Monaco', 'Courier New', monospace;

    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.85rem;    /* 13.6px */
    --font-size-base: 0.9rem;   /* 14.4px */
    --font-size-md: 1rem;       /* 16px */
    --font-size-lg: 1.1rem;     /* 17.6px */
    --font-size-xl: 1.2rem;     /* 19.2px */
    --font-size-2xl: 1.3rem;    /* 20.8px */
    --font-size-3xl: 1.5rem;    /* 24px */
    --font-size-4xl: 2rem;      /* 32px */
    --font-size-5xl: 2.5rem;    /* 40px */

    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.5;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;

    /* === Shadows === */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-lg: 0 4px 8px rgba(0,0,0,0.15);
    --shadow-xl: 0 4px 8px rgba(0,0,0,0.2);

    /* === Transitions === */
    --transition-fast: 0.2s;
    --transition-normal: 0.3s;
    --transition-slow: 0.5s;

    /* === Z-index === */
    --z-sticky: 100;
    --z-modal: 1000;
    --z-timer: 1000;
    --z-modal-overlay: 2000;

    /* === Breakpoints (for reference in media queries) === */
    /* Use these values in @media queries */
    /* --breakpoint-sm: 576px; */
    /* --breakpoint-md: 768px; */
    /* --breakpoint-lg: 992px; */
    /* --breakpoint-xl: 1200px; */
}