/* ═══════════════════════════════════════════════════════════
   ESG Disclose AI Carbon Calculator — Actualize UI Design System
   ═══════════════════════════════════════════════════════════ */

/* --- Reset --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Canvas (Actualize Dark) */
    --void: #050507;
    --surface: #0A0A0F;
    --surface-raised: #111118;
    --surface-overlay: rgba(17, 17, 24, 0.92);

    /* Corona — green to blue gradient system */
    --corona-deep: #489E46;
    --corona: #2489BD;
    --corona-bright: #7CC8E6;
    --corona-glow: rgba(74, 173, 224, 0.15);
    --corona-glow-strong: rgba(74, 173, 224, 0.3);

    /* Text */
    --text-primary: #F0F0F5;
    --text-secondary: #9498A8;
    --text-muted: #555868;

    /* Borders */
    --border-default: rgba(74, 173, 224, 0.12);
    --border-hover: rgba(74, 173, 224, 0.25);

    /* Corona Backgrounds & Borders (semantic) */
    --corona-bg: rgba(74, 173, 224, 0.08);
    --corona-bg-subtle: rgba(74, 173, 224, 0.04);
    --corona-border-light: rgba(74, 173, 224, 0.2);
    --corona-border-subtle: rgba(74, 173, 224, 0.15);

    /* Gradients */
    --grad-corona: linear-gradient(135deg, #489E46, #2489BD, #7CC8E6);
    --grad-corona-border: linear-gradient(90deg, #489E46, #2489BD, #7CC8E6);
    --gradient-brand: linear-gradient(135deg, #489E46, #2489BD, #7CC8E6);

    /* Functional */
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #E5534B;

    /* Transitions */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

    /* Legacy compat */
    --primary: #2489BD;
    --bg-canvas: #050507;
    --bg-primary: #0A0A0F;
    --bg-card: rgba(17, 17, 30, 0.4);

    /* ═════════════════════════════════════════════════════════════
       🔒 LOCKED LAYOUT SYSTEM - DO NOT MODIFY WITHOUT APPROVAL
       Changes here affect ENTIRE APPLICATION
       ═════════════════════════════════════════════════════════ */

    /* Layout Dimensions */
    --sidebar-width: 280px;
    --topbar-height: 62px;
    --scrollbar-w: 6px;
    --content-max-width: 1400px;
    --modal-max-width: 600px;

    /* Component Heights */
    --component-height-xs: 28px;
    --component-height-sm: 32px;
    --component-height-default: 38px;
    --component-height-md: 42px;
    --component-height-lg: 48px;
    --component-height-xl: 56px;

    /* Spacing Scale (8px base) */
    --space-0: 0;
    --space-1: 0.5rem;   /* 8px */
    --space-2: 1rem;     /* 16px */
    --space-3: 1.5rem;   /* 24px */
    --space-4: 2rem;     /* 32px */
    --space-5: 2.5rem;   /* 40px */
    --space-6: 3rem;     /* 48px */
    --space-8: 4rem;     /* 64px */
    --space-10: 5rem;    /* 80px */

    /* Z-Index System */
    --z-base: 1;
    --z-content: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 9998;
    --z-modal: 9999;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-notification: 800;
    --z-splash: 900;

    /* Border Radius Scale */
    --radius-none: 0;
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;

    /* Font Size Scale — 7-Tier Type System */
    --text-display: 2.5rem;  /* 40px — page titles, stat values */
    --text-2xl: 1.75rem;     /* 28px — section headers (h2) */
    --text-xl: 1.25rem;      /* 20px — card titles (h3), subsections */
    --text-base: 1rem;       /* 16px — body, subtitles, descriptions */
    --text-sm: 0.875rem;     /* 14px — buttons, table cells, labels */
    --text-xs: 0.75rem;      /* 12px — table headers, helper text */
    --text-2xs: 0.625rem;    /* 10px — badges, tags, tiny indicators */
}

/* Typography Utility Classes */
.text-display { font-size: var(--text-display) !important; }
.text-2xl { font-size: var(--text-2xl) !important; }
.text-xl { font-size: var(--text-xl) !important; }
.text-base { font-size: var(--text-base) !important; }
.text-sm { font-size: var(--text-sm) !important; }
.text-xs { font-size: var(--text-xs) !important; }
.text-2xs { font-size: var(--text-2xs) !important; }