/* core/css/main.css */

/* ========================================
   Minimal Reset
   (Replaces browser defaults)
   ======================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
}

img,
video {
    display: block;
    max-width: 100%;
}

/* ========================================
   Icon Size Utilities
   ======================================== */
.icon-sm {
    width: 1rem;
    height: 1rem;
}

.icon-md {
    width: 1.25rem;
    height: 1.25rem;
}

.icon-lg {
    width: 1.5rem;
    height: 1.5rem;
}

.icon-xl {
    width: 2.5rem;
    height: 2.5rem;
}

/* ========================================
   CSS Custom Properties – Fallback Defaults
   (Overridden by SiteConfig inline <style>)
   ======================================== */
:root {
    /* Surface palette – Neutral */
    /* A true achromatic gray with no colour bias. Clean and impartial, it stays out of the way of brand and semantic colours, letting content speak for itself. */
    --color-surface-50: 250 250 250;
    --color-surface-100: 245 245 245;
    --color-surface-200: 229 229 229;
    --color-surface-300: 212 212 212;
    --color-surface-400: 163 163 163;
    --color-surface-500: 115 115 115;
    --color-surface-600: 82 82 82;
    --color-surface-700: 64 64 64;
    --color-surface-800: 38 38 38;
    --color-surface-900: 23 23 23;
    --color-surface-950: 10 10 10;

    /* Primary palette – Emerald */
    /* A cooler, teal-leaning green from seafoam to deep jungle. More refined than pure green, well-suited for primary brand use alongside a non-green success palette. */
    --color-primary-50: 236 253 245;
    --color-primary-100: 209 250 229;
    --color-primary-200: 167 243 208;
    --color-primary-300: 110 231 183;
    --color-primary-400: 52 211 153;
    --color-primary-500: 16 185 129;
    --color-primary-600: 5 150 105;
    --color-primary-700: 4 120 87;
    --color-primary-800: 6 95 70;
    --color-primary-900: 6 78 59;
    --color-primary-950: 2 44 34;

    /* Secondary palette – Teal */
    /* A balanced blue-green from pale aqua to deep petrol. Carries associations with clarity and calm, effective for informational accents and secondary actions. */
    --color-secondary-50: 240 253 250;
    --color-secondary-100: 204 251 241;
    --color-secondary-200: 153 246 228;
    --color-secondary-300: 94 234 212;
    --color-secondary-400: 45 212 191;
    --color-secondary-500: 20 184 166;
    --color-secondary-600: 13 148 136;
    --color-secondary-700: 15 118 110;
    --color-secondary-800: 17 94 89;
    --color-secondary-900: 19 78 74;
    --color-secondary-950: 4 47 46;

    /* Accent palette – Green */
    /* A classic mid-range green from mint to forest. The conventional success colour, immediately understood as confirmation, completion, or healthy status. */
    --color-accent-50: 240 253 244;
    --color-accent-100: 220 252 231;
    --color-accent-200: 187 247 208;
    --color-accent-300: 134 239 172;
    --color-accent-400: 74 222 128;
    --color-accent-500: 34 197 94;
    --color-accent-600: 22 163 74;
    --color-accent-700: 21 128 61;
    --color-accent-800: 22 101 52;
    --color-accent-900: 20 83 45;
    --color-accent-950: 5 46 22;

    /* Success palette – Emerald */
    /* A balanced, saturated green grounded in the teal-green range. Universally legible as positive confirmation — completions, approvals, and healthy system states. */
    --color-success-50: 236 253 245;
    --color-success-100: 209 250 229;
    --color-success-200: 167 243 208;
    --color-success-300: 110 231 183;
    --color-success-400: 52 211 153;
    --color-success-500: 16 185 129;
    --color-success-600: 5 150 105;
    --color-success-700: 4 120 87;
    --color-success-800: 6 95 70;
    --color-success-900: 6 78 59;
    --color-success-950: 2 44 34;

    /* Warning palette – Orange */
    /* A saturated, warm orange distinct from the golden accent. Its higher chroma and redder lean demand immediate attention — ideal for degraded states, approaching limits, and action-required prompts. */
    --color-warning-50: 255 247 237;
    --color-warning-100: 255 237 213;
    --color-warning-200: 254 215 170;
    --color-warning-300: 253 186 116;
    --color-warning-400: 251 146 60;
    --color-warning-500: 249 115 22;
    --color-warning-600: 234 88 12;
    --color-warning-700: 194 65 12;
    --color-warning-800: 154 52 18;
    --color-warning-900: 124 45 18;
    --color-warning-950: 67 20 7;

    /* Destructive palette – Red */
    /* A pure, fully saturated red with no warm or cool bias. Unambiguously signals danger, errors, and irreversible actions — the one colour where personality must yield to clarity. */
    --color-destructive-50: 254 242 242;
    --color-destructive-100: 254 226 226;
    --color-destructive-200: 254 202 202;
    --color-destructive-300: 252 165 165;
    --color-destructive-400: 248 113 113;
    --color-destructive-500: 239 68 68;
    --color-destructive-600: 220 38 38;
    --color-destructive-700: 185 28 28;
    --color-destructive-800: 153 27 27;
    --color-destructive-900: 127 29 29;
    --color-destructive-950: 69 10 10;

    /* Info palette – Sky */
    /* A light, cyan-leaning blue that reads as calm and informational. Distinct from the deeper indigo primary, it signals contextual guidance — tooltips, notices, and supplementary detail. */
    --color-info-50: 240 249 255;
    --color-info-100: 224 242 254;
    --color-info-200: 186 230 253;
    --color-info-300: 125 211 252;
    --color-info-400: 56 189 248;
    --color-info-500: 14 165 233;
    --color-info-600: 2 132 199;
    --color-info-700: 3 105 161;
    --color-info-800: 7 89 133;
    --color-info-900: 12 74 110;
    --color-info-950: 8 47 73;

    /* Typography - Base Stack */
    --font-family: system-ui, -apple-system, sans-serif;
    --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    /* Typography - Semantic Roles (Falls back to base stack) */
    --font-heading: var(--font-family);
    --font-body: var(--font-family);
    --font-ui: var(--font-family);
    --font-mono: var(--font-family-mono);

    /* Typography - Semantic Weight Slots (Overrides browser faux-weights) */
    --font-weight-thin: 100;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;

    /* Role-specific weight slots (Default to semantic slots) */
    /* Handled dynamically by SiteConfig mapping if custom font is used */
    --font-heading-weight-thin: var(--font-weight-thin);
    --font-heading-weight-light: var(--font-weight-light);
    --font-heading-weight-regular: var(--font-weight-regular);
    --font-heading-weight-medium: var(--font-weight-medium);
    --font-heading-weight-semibold: var(--font-weight-semibold);
    --font-heading-weight-bold: var(--font-weight-bold);
    --font-heading-weight-extrabold: var(--font-weight-extrabold);
    --font-heading-weight-black: var(--font-weight-black);

    --font-body-weight-thin: var(--font-weight-thin);
    --font-body-weight-light: var(--font-weight-light);
    --font-body-weight-regular: var(--font-weight-regular);
    --font-body-weight-medium: var(--font-weight-medium);
    --font-body-weight-semibold: var(--font-weight-semibold);
    --font-body-weight-bold: var(--font-weight-bold);
    --font-body-weight-extrabold: var(--font-weight-extrabold);
    --font-body-weight-black: var(--font-weight-black);

    /* Theme-aware card background */
    --auth-card-bg: rgb(var(--color-surface-50) / 0.8);
}

body {
    background-color: rgb(var(--color-surface-50));
}

@media (prefers-color-scheme: dark) {
    :root {
        --auth-card-bg: rgb(var(--color-surface-50) / 0.05);
    }

    body {
        background-color: rgb(var(--color-surface-900));
    }
}