/*
 * Design tokens for the "Institutional Financial Intelligence" design
 * system (see financial_governance_brand_guideline.md). Single source of
 * truth for color, spacing, radius and shadow across admin + respondent
 * surfaces. Legacy variable names (--primary, --surface, --border, etc.)
 * are kept as aliases so existing component CSS keeps working unchanged.
 */
:root {
    /* Navy (institutional foundation) */
    --navy-950: #031A4A;
    --navy-900: #06245C;
    --navy-800: #0A3274;
    --navy-700: #114292;
    --navy: var(--navy-950);
    --navy-2: var(--navy-900);

    /* Royal blue (primary action) */
    --blue-700: #1646C8;
    --blue-600: #2157E5;
    --blue-500: #2F6BFF;
    --blue-400: #5790FF;
    --blue: var(--blue-600);
    --blue-hover: #1849C9;
    --blue-light: var(--blue-400);
    --sky: var(--blue-400);

    /* Teal (secondary accent: success / verified / compliance only) */
    --teal-700: #087E85;
    --teal-600: #07999B;
    --teal-500: #13AAA7;
    --teal-400: #3FC5C0;
    --teal-100: #DDF7F5;
    --teal: var(--teal-600);
    --teal-soft: var(--teal-100);

    /* Gold: not a core brand hue here, kept only as the "cukup"/mid badge
       tier and optional chart accent — mirrors --warning by design. */
    --gold: #E9A23B;
    --gold-soft: #FFF7E6;

    /* Backgrounds */
    --bg-main: #F5F8FE;
    --bg-soft: #EDF4FC;
    --bg-blue-soft: #E5F0FD;
    --bg: var(--bg-main);
    --body: var(--bg-main);
    --surface: #FFFFFF;
    --white: #FFFFFF;

    /* Neutrals */
    --gray-950: #111827;
    --gray-900: #172033;
    --gray-800: #26324A;
    --gray-700: #394760;
    --gray-600: #64748B;
    --gray-500: #8492A6;
    --gray-400: #A8B3C5;
    --gray-300: #CBD5E1;
    --gray-200: #E2E8F0;
    --gray-100: #F1F5F9;
    --gray-50: #F8FAFC;

    /* Text */
    --heading: #10234B;
    --text: #172033;
    --text-secondary: #475569;
    --text-muted: #8492A6;
    --muted: var(--text-muted);
    --ink: var(--text);
    --ink-hover: var(--heading);
    --secondary: var(--text-secondary);

    /* Border */
    --border: #DFE7F2;
    --divider: #E7EDF5;
    --line: var(--border);

    /* Semantic */
    --success: #0F9F91;
    --success-soft: #E7F8F5;
    --warning: #E9A23B;
    --warning-soft: #FFF7E6;
    --danger: #D94B56;
    --danger-soft: #FFF0F1;
    --info: #2F6BFF;
    --info-soft: #EDF4FF;

    /* Chart palette (no rainbow — brand hues only) */
    --chart-1: #2157E5;
    --chart-2: #13AAA7;
    --chart-3: #174080;
    --chart-4: #6EA4FF;
    --chart-5: #A7DCD9;
    --chart-6: #E9A23B;

    /* Legacy alias layer */
    --primary: var(--blue);
    --primary-hover: var(--blue-hover);
    --hover: var(--bg-soft);
    --active: var(--bg-blue-soft);

    /* Radius */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 999px;
    --radius: var(--radius-md);

    /* Shadow */
    --shadow-xs: 0 1px 3px rgba(16, 35, 75, .05);
    --shadow-sm: 0 3px 10px rgba(16, 35, 75, .06);
    --shadow-md: 0 2px 4px rgba(15, 35, 75, .02), 0 8px 24px rgba(15, 35, 75, .06);
    --shadow-lg: 0 18px 50px rgba(11, 39, 91, .14);
    --shadow: var(--shadow-md);

    /* Spacing (4px base) */
    --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
    --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
    --space-12: 48px; --space-16: 64px;

    /* Component sizing */
    --btn-height: 42px; --btn-height-sm: 34px; --btn-height-lg: 48px;
    --input-height: 44px; --toolbar-height: 44px; --table-row: 54px;
    /* Typography scale: 10% below the guideline baseline, floored at 11px. */
    --font-size-xs: 11px; --font-size-sm: 11.7px; --font-size: 12.6px; --font-size-lg: 14.4px;
    --font-ui: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: var(--font-ui);

    /* Sidebar: subtle navy-to-teal gradient, kept clearly darker than the
       page background so the rail never blends into the content area. */
    --sidebar-gradient: linear-gradient(180deg, #0B3A80 0%, #072A5E 46%, #063E4C 100%);

    /* Breakpoints (informational — for reference in comments/JS) */
    --bp-mobile: 480px; --bp-tablet: 768px; --bp-laptop: 1024px; --bp-desktop: 1280px; --bp-wide: 1440px;
}

[data-theme="dark"] {
    --navy-950: #031A4A; --navy-900: #0A3274;
    --blue: #5790FF; --blue-hover: #7CA9FF; --blue-light: #7CA9FF; --sky: #7CA9FF;
    --teal: #3FC5C0; --teal-soft: #0E3A38; --gold: #E9A23B; --gold-soft: #3A2A0E;
    --primary: var(--blue); --primary-hover: var(--blue-hover);
    --surface: #111C34; --bg: #0B1526; --body: #0B1526;
    --text: #F1F5F9; --text-secondary: #CBD5E1; --text-muted: #94A3B8; --heading: #F1F5F9;
    --border: #24304A; --divider: #24304A; --hover: #16223D; --active: #172A4D;
    --danger: #F0808A; --danger-soft: #3F1B1B;
    --warning: #FBBF24; --warning-soft: #3F2E10;
    --success: #4FD5C6; --success-soft: #12332F;
}