/**
 * CREST Olympiads - Unified Color Palette
 * ========================================
 *
 * Created: 2025-11-28
 * Updated: 2026-02-02
 *
 * This file contains ONLY CSS Custom Properties (variables) and theme classes.
 * All style overrides have been migrated to their proper source files.
 *
 * Color Palette Reference (11 Core Colors):
 * -----------------------------------------
 * PASTELS (8 Colors - Backgrounds/Accents):
 *   1. Powder Petal:    #fde4cf - Warm backgrounds, SpellBee theme
 *   2. Cotton Rose:     #ffcfd2 - Soft accents, English theme
 *   3. Pink Orchid:     #f1c0e8 - Creative elements, Drawing theme
 *   4. Periwinkle:      #cfbaf0 - Headers, Reasoning theme
 *   5. Baby Blue Ice:   #a3c4f3 - Primary accents, Math theme
 *   6. Sky Blue Light:  #90dbf4 - Info states, Mental Maths theme
 *   7. Electric Aqua:   #8eecf5 - Highlights, Cyber theme
 *   8. Soft Cyan:       #98f5e1 - Success states, Green/Science theme
 *
 * BRAND (3 Colors - Navy):
 *   - Navy:             #0F5A7E - Primary brand (menus, buttons, links)
 *   - Navy Light:       #1A7BA8 - Hover states
 *   - Navy Dark:        #0A4560 - Active states, emphasis
 *
 * STATUS:
 *   - Error/Alert:      #E53935
 *   - Success:          #4CAF50
 *   - Warning:          #FB8C00
 */

/* ==========================================================================
   CSS Custom Properties (Variables)
   ========================================================================== */

:root {
    /* =============================================
       Spacing System
       ============================================= */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* =============================================
       Official Pastel Palette (8 Colors)
       ============================================= */
    --color-powder-petal: #fde4cf;    /* Warm peach - backgrounds */
    --color-cotton-rose: #ffcfd2;     /* Soft pink - accents */
    --color-pink-orchid: #f1c0e8;     /* Lavender-pink - creative */
    --color-periwinkle: #cfbaf0;      /* Blue-lavender - headers */
    --color-baby-blue-ice: #a3c4f3;   /* Light blue - primary accent */
    --color-sky-blue-light: #90dbf4;  /* Bright sky blue - info */
    --color-electric-aqua: #8eecf5;   /* Vibrant aqua - highlights */
    --color-soft-cyan: #98f5e1;       /* Pale mint - success */

    /* Legacy aliases (map to closest new color) */
    --color-lemon-chiffon: #fde4cf;   /* Use Powder Petal instead */
    --color-celadon: #98f5e1;         /* Use Soft Cyan instead */
    --color-sky-blue: #90dbf4;        /* Alias for sky-blue-light */

    /* =============================================
       Navy Brand Colors (3 Colors)
       ============================================= */
    --color-navy: #0F5A7E;            /* Primary brand color */
    --color-navy-light: #1A7BA8;      /* Hover states */
    --color-navy-dark: #0A4560;       /* Active states */

    /* Status Colors */
    --color-error: #E53935;
    --color-error-light: #FFEBEE;
    --color-success: #4CAF50;
    --color-success-light: #E8F5E9;
    --color-warning: #FB8C00;
    --color-warning-light: #FFF3E0;

    /* =============================================
       Answer/Exam Status Colors
       ============================================= */
    --color-correct: #00a65a;             /* Green - Correct answers, Attempted */
    --color-correct-highlight: #01c36a;   /* Lighter green for hover/highlight */
    --color-incorrect: #e85252;           /* Red - Incorrect answers, Not attempted */
    --color-incorrect-highlight: #f56954; /* Lighter red for hover/highlight */
    --color-not-visited: #d2d2d2;         /* Gray - Not visited questions */

    /* =============================================
       Gray Scale (Material Design Neutral)
       ============================================= */
    --color-gray-50: #FAFAFA;     /* Lightest - subtle backgrounds */
    --color-gray-100: #F5F5F5;    /* Light backgrounds */
    --color-gray-200: #EEEEEE;    /* Borders, dividers */
    --color-gray-300: #E0E0E0;    /* Disabled states */
    --color-gray-400: #BDBDBD;    /* Placeholder text */
    --color-gray-500: #9E9E9E;    /* Secondary icons */
    --color-gray-600: #757575;    /* Secondary text */
    --color-gray-700: #616161;    /* Primary icons */
    --color-gray-800: #424242;    /* Primary text */
    --color-gray-900: #212121;    /* Headings, emphasis */

    /* Legacy gray aliases (for backward compatibility) */
    --color-white: #FFFFFF;
    --color-black: #212121;
    --color-gray-dark: var(--color-gray-800);
    --color-gray: var(--color-gray-600);
    --color-gray-light: var(--color-gray-400);
    --color-gray-lighter: var(--color-gray-300);
    --color-gray-lightest: var(--color-gray-50);

    /* Semantic Mappings */
    --text-primary: var(--color-black);
    --text-secondary: var(--color-gray-dark);
    --text-muted: var(--color-gray);
    --text-on-dark: var(--color-white);

    --bg-primary: var(--color-white);
    --bg-secondary: var(--color-gray-lightest);

    --link-color: var(--color-navy);
    --link-hover: var(--color-navy-light);

    --border-color: var(--color-gray-lighter);
}

/* ==========================================================================
   Subject-Specific Theme Classes
   Add class to <body> or page container to apply theme
   ========================================================================== */

/* Maths Olympiad - Baby Blue Ice */
.theme-maths,
[class*="maths-olympiad"],
[class*="cmo-"] {
    --theme-accent: var(--color-baby-blue-ice);
    --theme-accent-light: #d1e2f9;
}

/* Science Olympiad - Celadon */
.theme-science,
[class*="science-olympiad"],
[class*="cso-"] {
    --theme-accent: var(--color-celadon);
    --theme-accent-light: #dcfddf;
}

/* English Olympiad - Cotton Rose */
.theme-english,
[class*="english-olympiad"],
[class*="ceo-"] {
    --theme-accent: var(--color-cotton-rose);
    --theme-accent-light: #ffe7e9;
}

/* Cyber Olympiad - Electric Aqua */
.theme-cyber,
[class*="cyber-olympiad"],
[class*="cco-"] {
    --theme-accent: var(--color-electric-aqua);
    --theme-accent-light: #c7f5fa;
}

/* Reasoning Olympiad - Periwinkle */
.theme-reasoning,
[class*="reasoning-olympiad"],
[class*="cro-"] {
    --theme-accent: var(--color-periwinkle);
    --theme-accent-light: #e7ddf8;
}

/* SpellBee - Powder Petal */
.theme-spellbee,
[class*="spellbee"] {
    --theme-accent: var(--color-powder-petal);
    --theme-accent-light: #fef1e7;
}

/* Drawing Olympiad - Pink Orchid */
.theme-drawing,
[class*="drawing-olympiad"],
[class*="cido-"] {
    --theme-accent: var(--color-pink-orchid);
    --theme-accent-light: #f8dff3;
}

/* Green Olympiad - Soft Cyan */
.theme-green,
[class*="green-olympiad"],
[class*="gwo-"] {
    --theme-accent: var(--color-soft-cyan);
    --theme-accent-light: #ccfaf0;
}

/* Mental Maths - Sky Blue */
.theme-mental-maths,
[class*="mental-maths"],
[class*="mmo-"] {
    --theme-accent: var(--color-sky-blue);
    --theme-accent-light: #c8edfa;
}

/* IQ Challenge - Lemon Chiffon */
.theme-iq,
[class*="iq-challenge"],
[class*="cic-"] {
    --theme-accent: var(--color-lemon-chiffon);
    --theme-accent-light: #fdfce5;
}