/**
 * KPI Design Tokens — single source of truth.
 * Do not hardcode colors/radii/shadows elsewhere; reference these variables.
 */

:root {
    /* Brand */
    --kpi-primary: #e88aa0;
    --kpi-primary-hover: #d9778a;
    --kpi-primary-active: #c96b80;
    --kpi-primary-soft: rgba(232, 138, 160, 0.14);
    --kpi-primary-muted: #f2a4b0;
    --kpi-primary-subtle: #fff0f3;

    /* On-solid button text (light) */
    --kpi-on-primary: #ffffff;
    --kpi-on-success: #ffffff;
    --kpi-on-warning: #ffffff;
    --kpi-on-danger: #ffffff;
    --kpi-on-info: #ffffff;

    /* Semantic */
    --kpi-success: #1f9d57;
    --kpi-success-hover: #188a4b;
    --kpi-success-soft: rgba(31, 157, 87, 0.12);
    --kpi-warning: #d4870f;
    --kpi-warning-hover: #b8730c;
    --kpi-warning-soft: rgba(212, 135, 15, 0.12);
    --kpi-danger: #d64545;
    --kpi-danger-hover: #bd3636;
    --kpi-danger-soft: rgba(214, 69, 69, 0.12);
    --kpi-info: #3d7ea6;
    --kpi-info-hover: #336b8e;
    --kpi-info-soft: rgba(61, 126, 166, 0.12);

    /* Surfaces */
    --kpi-background: #f6f2f3;
    --kpi-background-gradient:
        radial-gradient(ellipse 80% 50% at 0% 0%, rgba(232, 138, 160, 0.08) 0%, transparent 55%),
        radial-gradient(ellipse 60% 45% at 100% 100%, rgba(232, 138, 160, 0.05) 0%, transparent 50%),
        linear-gradient(180deg, #faf7f8 0%, #f3eef0 100%);
    --kpi-surface: #ffffff;
    --kpi-surface-elevated: #ffffff;
    --kpi-surface-muted: #faf6f7;
    --kpi-accent: #fff0f3;
    --kpi-border: #e8d5da;
    --kpi-border-strong: #d4b8c0;

    /* Text */
    --kpi-text: #2f1f26;
    --kpi-text-secondary: #5c4a51;
    --kpi-muted: #6f5e64;
    --kpi-text-inverse: #ffffff;
    --kpi-text-disabled: #a8989e;

    /* Legacy alias map (medical theme + existing CSS) */
    --kpi-medical-primary: var(--kpi-primary-muted);
    --kpi-medical-primary-dark: var(--kpi-primary);
    --kpi-medical-primary-light: #ffd1dc;
    --kpi-medical-primary-soft: var(--kpi-primary-soft);
    --kpi-medical-bg: var(--kpi-background);
    --kpi-medical-surface: var(--kpi-surface);
    --kpi-medical-accent: var(--kpi-accent);
    --kpi-medical-border: var(--kpi-border);
    --kpi-medical-text: var(--kpi-text);
    --kpi-medical-text-muted: var(--kpi-muted);
    --kpi-medical-bg-gradient: var(--kpi-background-gradient);

    /* Shape */
    --kpi-radius-xs: 6px;
    --kpi-radius-sm: 8px;
    --kpi-radius: 12px;
    --kpi-radius-lg: 16px;
    --kpi-radius-xl: 20px;
    --kpi-radius-pill: 999px;

    /* Elevation */
    --kpi-shadow-xs: 0 1px 2px rgba(47, 31, 38, 0.04);
    --kpi-shadow-sm: 0 2px 8px rgba(47, 31, 38, 0.05);
    --kpi-shadow-md: 0 4px 16px rgba(47, 31, 38, 0.07);
    --kpi-shadow-lg: 0 12px 32px rgba(47, 31, 38, 0.1);
    --kpi-shadow-focus: 0 0 0 3px var(--kpi-primary-soft);

    /* Spacing scale */
    --kpi-spacing-2xs: 0.25rem;
    --kpi-spacing-xs: 0.5rem;
    --kpi-spacing-sm: 0.75rem;
    --kpi-spacing-md: 1rem;
    --kpi-spacing-lg: 1.5rem;
    --kpi-spacing-xl: 2rem;
    --kpi-spacing-2xl: 3rem;

    /* Typography */
    --kpi-font: 'Cairo', system-ui, sans-serif;
    --kpi-font-size-xs: 0.75rem;
    --kpi-font-size-sm: 0.8125rem;
    --kpi-font-size-md: 0.9375rem;
    --kpi-font-size-lg: 1.125rem;
    --kpi-font-size-xl: 1.375rem;
    --kpi-font-size-2xl: 1.75rem;
    --kpi-line-tight: 1.25;
    --kpi-line-normal: 1.5;
    --kpi-font-weight-medium: 500;
    --kpi-font-weight-semibold: 600;
    --kpi-font-weight-bold: 700;

    /* Shell */
    --kpi-sidebar-width: 260px;
    --kpi-header-height: 64px;
    --kpi-z-sidebar: 1031;
    --kpi-z-header: 1030;
    --kpi-z-modal: 1050;
    --kpi-transition: 0.18s ease;

    /* Charts / program fallback (no Vuexy purple) */
    --kpi-program-fallback: var(--kpi-primary);
    --kpi-dash-radius: var(--kpi-radius-lg);
}


/*
 * Dark theme — premium Healthcare Enterprise palette.
 * Slate/graphite for structure. Healthcare rose for brand only.
 */
html[data-theme-layout="dark-layout"] {
    /* Brand — Healthcare Rose (guide the eye, never dominate) */
    --kpi-primary: #e88aa0;
    --kpi-primary-hover: #f2a4b0;
    --kpi-primary-active: #d9778a;
    --kpi-primary-soft: rgba(232, 138, 160, 0.14);
    --kpi-primary-muted: #c4788c;
    --kpi-primary-subtle: #2a2430;

    /* On-solid label color (dark ink on luminous fills) */
    --kpi-on-primary: #0f172a;
    --kpi-on-success: #0f172a;
    --kpi-on-warning: #0f172a;
    --kpi-on-danger: #0f172a;
    --kpi-on-info: #0f172a;

    /* Semantic — muted, elegant, dark-ready */
    --kpi-success: #4ade80;
    --kpi-success-hover: #6ee7a0;
    --kpi-success-soft: rgba(74, 222, 128, 0.14);
    --kpi-warning: #fbbf24;
    --kpi-warning-hover: #fcd34d;
    --kpi-warning-soft: rgba(251, 191, 36, 0.14);
    --kpi-danger: #f87171;
    --kpi-danger-hover: #fca5a5;
    --kpi-danger-soft: rgba(248, 113, 113, 0.14);
    --kpi-info: #60a5fa;
    --kpi-info-hover: #93c5fd;
    --kpi-info-soft: rgba(96, 165, 250, 0.14);

    /* Slate / Graphite hierarchy
       Page #0F172A → L1 #1E293B → L2 #273449 → L3 #334155 | Border #475569 */
    --kpi-background: #0f172a;
    --kpi-background-gradient:
        radial-gradient(ellipse 70% 45% at 100% 0%, rgba(232, 138, 160, 0.035) 0%, transparent 55%),
        linear-gradient(180deg, #111827 0%, #0f172a 100%);
    --kpi-surface: #1e293b;
    --kpi-surface-elevated: #273449;
    --kpi-surface-muted: #273449;
    --kpi-accent: #334155;
    --kpi-border: #475569;
    --kpi-border-strong: #64748b;

    /* Text */
    --kpi-text: #f8fafc;
    --kpi-text-secondary: #cbd5e1;
    --kpi-muted: #94a3b8;
    --kpi-text-inverse: #0f172a;
    --kpi-text-disabled: #64748b;

    /* Soft depth — hierarchy prefers layers over heavy shadows */
    --kpi-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.45);
    --kpi-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.4);
    --kpi-shadow-md: 0 6px 20px rgba(15, 23, 42, 0.45);
    --kpi-shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.55);
    --kpi-shadow-focus: 0 0 0 3px rgba(232, 138, 160, 0.35);

    --kpi-medical-primary: var(--kpi-primary);
    --kpi-medical-primary-dark: var(--kpi-primary-active);
    --kpi-medical-primary-light: var(--kpi-primary-hover);
    --kpi-medical-primary-soft: var(--kpi-primary-soft);
    --kpi-medical-bg: var(--kpi-background);
    --kpi-medical-surface: var(--kpi-surface);
    --kpi-medical-accent: var(--kpi-accent);
    --kpi-medical-border: var(--kpi-border);
    --kpi-medical-text: var(--kpi-text);
    --kpi-medical-text-muted: var(--kpi-muted);
    --kpi-medical-bg-gradient: var(--kpi-background-gradient);

    --kpi-program-fallback: var(--kpi-primary);
    --kpi-program-color: var(--kpi-primary);
}