/* SmartCare Admin — Design tokens
 * Light theme on :root, dark theme on [data-theme="dark"].
 * No build pipeline required — plain CSS custom properties. */

:root {
    /* Brand — Indigo primary ramp */
    --brand-50:  #eef2ff;
    --brand-100: #e0e7ff;
    --brand-200: #c7d2fe;
    --brand-300: #a5b4fc;
    --brand-400: #818cf8;
    --brand-500: #6366f1;   /* primary */
    --brand-600: #4f46e5;
    --brand-700: #4338ca;
    --brand-800: #3730a3;
    --brand-900: #312e81;
    --brand-primary: var(--brand-500);
    --brand-primary-hover: var(--brand-600);
    --brand-on-primary: #ffffff;

    /* Accents */
    --brand-accent:  #a855f7;  /* violet */
    --brand-accent-2: #ec4899; /* pink */
    --brand-success: #10b981;  /* emerald */
    --brand-warning: #f59e0b;  /* amber */
    --brand-danger:  #f43f5e;  /* rose */
    --brand-info:    #0ea5e9;  /* sky */

    /* Soft tints (for alerts / status pills backgrounds) */
    --tint-success: #d1fae5;
    --tint-warning: #fef3c7;
    --tint-danger:  #ffe4e6;
    --tint-info:    #e0f2fe;
    --tint-brand:   #eef2ff;

    /* Surfaces & borders (light) */
    --surface-0: #ffffff;          /* app background */
    --surface-1: #f8fafc;          /* card / panel */
    --surface-2: #f1f5f9;          /* hover / stripe */
    --surface-3: #e2e8f0;          /* selected */
    --surface-elevated: #ffffff;
    --border:        #e2e8f0;
    --border-strong: #cbd5e1;
    --border-focus:  var(--brand-500);

    /* Text */
    --text-primary:   #0f172a;
    --text-secondary: #475569;
    --text-muted:     #94a3b8;
    --text-inverse:   #ffffff;
    --text-on-accent: #ffffff;

    /* Gradients */
    --gradient-hero:     linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);
    --gradient-hero-soft: linear-gradient(135deg, rgba(99,102,241,0.95) 0%, rgba(168,85,247,0.90) 50%, rgba(236,72,153,0.85) 100%);
    --gradient-card:     linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(168,85,247,0.08) 100%);
    --gradient-tile-1:   linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
    --gradient-tile-2:   linear-gradient(135deg, #a855f7 0%, #c084fc 100%);
    --gradient-tile-3:   linear-gradient(135deg, #10b981 0%, #34d399 100%);
    --gradient-tile-4:   linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
    --gradient-mesh:     radial-gradient(at 0% 0%, rgba(99,102,241,0.18) 0px, transparent 50%),
                         radial-gradient(at 100% 0%, rgba(168,85,247,0.18) 0px, transparent 50%),
                         radial-gradient(at 100% 100%, rgba(236,72,153,0.14) 0px, transparent 50%),
                         radial-gradient(at 0% 100%, rgba(14,165,233,0.12) 0px, transparent 50%);

    /* Type scale */
    --fs-xs:   0.75rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-lg:   1.125rem;
    --fs-xl:   1.25rem;
    --fs-2xl:  1.5rem;
    --fs-3xl:  1.875rem;
    --fs-4xl:  2.25rem;
    --fs-5xl:  3rem;
    --lh-tight:  1.15;
    --lh-snug:   1.3;
    --lh-normal: 1.5;

    /* Spacing (4px grid) */
    --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;

    /* Radius */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-2xl:  28px;
    --radius-pill: 999px;

    /* Shadows */
    --shadow-xs: 0 1px 1px rgba(15,23,42,0.04);
    --shadow-sm: 0 1px 2px rgba(15,23,42,0.05);
    --shadow-md: 0 4px 12px rgba(15,23,42,0.06), 0 2px 4px rgba(15,23,42,0.04);
    --shadow-lg: 0 20px 40px -12px rgba(99,102,241,0.18), 0 8px 16px -8px rgba(15,23,42,0.08);
    --shadow-xl: 0 30px 60px -20px rgba(99,102,241,0.25), 0 12px 24px -8px rgba(15,23,42,0.10);
    --shadow-glow: 0 0 0 4px rgba(99,102,241,0.15);
    --shadow-glow-success: 0 0 0 4px rgba(16,185,129,0.18);
    --shadow-glow-danger:  0 0 0 4px rgba(244,63,94,0.18);

    /* Motion */
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 320ms;
    --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

    /* Layout */
    --sidebar-width:           240px;
    --sidebar-width-collapsed: 72px;
    --topbar-height:           64px;
    --content-max-width:       1440px;

    /* Glass effect */
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(226, 232, 240, 0.6);
    --glass-blur: 12px;

    /* Charts */
    --chart-grid:  #e2e8f0;
    --chart-axis:  #94a3b8;
    --chart-series-1: var(--brand-500);
    --chart-series-2: var(--brand-accent);
    --chart-series-3: var(--brand-success);
    --chart-series-4: var(--brand-warning);
}

/* =============================================================
 * ACCENT THEMES — swap brand-primary + accent + gradients.
 * Applied via [data-accent="..."] on <html>.
 * Default (no attribute) = indigo.
 * ========================================================== */

/* Teal (Trustworthy clinical) */
[data-accent="teal"] {
    --brand-50:  #f0fdfa;
    --brand-100: #ccfbf1;
    --brand-200: #99f6e4;
    --brand-300: #5eead4;
    --brand-400: #2dd4bf;
    --brand-500: #14b8a6;
    --brand-600: #0d9488;
    --brand-700: #0f766e;
    --brand-800: #115e59;
    --brand-900: #134e4a;
    --brand-primary: #0d9488;
    --brand-primary-hover: #0f766e;
    --brand-accent:   #06b6d4;
    --brand-accent-2: #0ea5e9;
    --tint-brand: #ccfbf1;
    --gradient-hero:     linear-gradient(135deg, #0d9488 0%, #06b6d4 50%, #0ea5e9 100%);
    --gradient-card:     linear-gradient(135deg, rgba(13,148,136,0.10) 0%, rgba(6,182,212,0.10) 100%);
    --gradient-tile-1:   linear-gradient(135deg, #0d9488 0%, #2dd4bf 100%);
    --gradient-tile-2:   linear-gradient(135deg, #06b6d4 0%, #38bdf8 100%);
    --gradient-mesh:     radial-gradient(at 0% 0%, rgba(20,184,166,0.18) 0px, transparent 50%),
                         radial-gradient(at 100% 0%, rgba(6,182,212,0.18) 0px, transparent 50%),
                         radial-gradient(at 100% 100%, rgba(14,165,233,0.14) 0px, transparent 50%),
                         radial-gradient(at 0% 100%, rgba(94,234,212,0.14) 0px, transparent 50%);
    --shadow-lg: 0 20px 40px -12px rgba(13,148,136,0.22), 0 8px 16px -8px rgba(15,23,42,0.08);
    --shadow-glow: 0 0 0 4px rgba(13,148,136,0.18);
}

/* Emerald (Friendly health-tech) */
[data-accent="emerald"] {
    --brand-50:  #ecfdf5;
    --brand-100: #d1fae5;
    --brand-200: #a7f3d0;
    --brand-300: #6ee7b7;
    --brand-400: #34d399;
    --brand-500: #10b981;
    --brand-600: #059669;
    --brand-700: #047857;
    --brand-800: #065f46;
    --brand-900: #064e3b;
    --brand-primary: #10b981;
    --brand-primary-hover: #059669;
    --brand-accent:   #14b8a6;
    --brand-accent-2: #84cc16;
    --tint-brand: #d1fae5;
    --gradient-hero:     linear-gradient(135deg, #10b981 0%, #14b8a6 50%, #06b6d4 100%);
    --gradient-card:     linear-gradient(135deg, rgba(16,185,129,0.10) 0%, rgba(20,184,166,0.10) 100%);
    --gradient-tile-1:   linear-gradient(135deg, #10b981 0%, #34d399 100%);
    --gradient-tile-2:   linear-gradient(135deg, #14b8a6 0%, #2dd4bf 100%);
    --gradient-mesh:     radial-gradient(at 0% 0%, rgba(16,185,129,0.18) 0px, transparent 50%),
                         radial-gradient(at 100% 0%, rgba(20,184,166,0.18) 0px, transparent 50%),
                         radial-gradient(at 100% 100%, rgba(132,204,22,0.14) 0px, transparent 50%),
                         radial-gradient(at 0% 100%, rgba(110,231,183,0.14) 0px, transparent 50%);
    --shadow-lg: 0 20px 40px -12px rgba(16,185,129,0.22), 0 8px 16px -8px rgba(15,23,42,0.08);
    --shadow-glow: 0 0 0 4px rgba(16,185,129,0.18);
}

/* Rose (Bold accent) */
[data-accent="rose"] {
    --brand-50:  #fff1f2;
    --brand-100: #ffe4e6;
    --brand-200: #fecdd3;
    --brand-300: #fda4af;
    --brand-400: #fb7185;
    --brand-500: #f43f5e;
    --brand-600: #e11d48;
    --brand-700: #be123c;
    --brand-800: #9f1239;
    --brand-900: #881337;
    --brand-primary: #f43f5e;
    --brand-primary-hover: #e11d48;
    --brand-accent:   #ec4899;
    --brand-accent-2: #f97316;
    --tint-brand: #ffe4e6;
    --gradient-hero:     linear-gradient(135deg, #f43f5e 0%, #ec4899 50%, #a855f7 100%);
    --gradient-card:     linear-gradient(135deg, rgba(244,63,94,0.10) 0%, rgba(236,72,153,0.10) 100%);
    --gradient-tile-1:   linear-gradient(135deg, #f43f5e 0%, #fb7185 100%);
    --gradient-tile-2:   linear-gradient(135deg, #ec4899 0%, #f472b6 100%);
    --gradient-mesh:     radial-gradient(at 0% 0%, rgba(244,63,94,0.18) 0px, transparent 50%),
                         radial-gradient(at 100% 0%, rgba(236,72,153,0.18) 0px, transparent 50%),
                         radial-gradient(at 100% 100%, rgba(249,115,22,0.14) 0px, transparent 50%),
                         radial-gradient(at 0% 100%, rgba(253,164,175,0.14) 0px, transparent 50%);
    --shadow-lg: 0 20px 40px -12px rgba(244,63,94,0.22), 0 8px 16px -8px rgba(15,23,42,0.08);
    --shadow-glow: 0 0 0 4px rgba(244,63,94,0.18);
}

/* Amber (Warm & energetic) */
[data-accent="amber"] {
    --brand-50:  #fffbeb;
    --brand-100: #fef3c7;
    --brand-200: #fde68a;
    --brand-300: #fcd34d;
    --brand-400: #fbbf24;
    --brand-500: #f59e0b;
    --brand-600: #d97706;
    --brand-700: #b45309;
    --brand-800: #92400e;
    --brand-900: #78350f;
    --brand-primary: #d97706;
    --brand-primary-hover: #b45309;
    --brand-accent:   #f97316;
    --brand-accent-2: #ef4444;
    --tint-brand: #fef3c7;
    --gradient-hero:     linear-gradient(135deg, #d97706 0%, #f97316 50%, #f43f5e 100%);
    --gradient-card:     linear-gradient(135deg, rgba(217,119,6,0.10) 0%, rgba(249,115,22,0.10) 100%);
    --gradient-tile-1:   linear-gradient(135deg, #d97706 0%, #fbbf24 100%);
    --gradient-tile-2:   linear-gradient(135deg, #f97316 0%, #fb923c 100%);
    --gradient-mesh:     radial-gradient(at 0% 0%, rgba(245,158,11,0.18) 0px, transparent 50%),
                         radial-gradient(at 100% 0%, rgba(249,115,22,0.18) 0px, transparent 50%),
                         radial-gradient(at 100% 100%, rgba(239,68,68,0.14) 0px, transparent 50%),
                         radial-gradient(at 0% 100%, rgba(252,211,77,0.14) 0px, transparent 50%);
    --shadow-lg: 0 20px 40px -12px rgba(217,119,6,0.22), 0 8px 16px -8px rgba(15,23,42,0.08);
    --shadow-glow: 0 0 0 4px rgba(217,119,6,0.20);
}

/* Slate (Minimal & neutral) */
[data-accent="slate"] {
    --brand-50:  #f8fafc;
    --brand-100: #f1f5f9;
    --brand-200: #e2e8f0;
    --brand-300: #cbd5e1;
    --brand-400: #94a3b8;
    --brand-500: #64748b;
    --brand-600: #475569;
    --brand-700: #334155;
    --brand-800: #1e293b;
    --brand-900: #0f172a;
    --brand-primary: #334155;
    --brand-primary-hover: #1e293b;
    --brand-accent:   #0ea5e9;
    --brand-accent-2: #6366f1;
    --tint-brand: #e2e8f0;
    --gradient-hero:     linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
    --gradient-card:     linear-gradient(135deg, rgba(51,65,85,0.08) 0%, rgba(14,165,233,0.10) 100%);
    --gradient-tile-1:   linear-gradient(135deg, #334155 0%, #64748b 100%);
    --gradient-tile-2:   linear-gradient(135deg, #0ea5e9 0%, #38bdf8 100%);
    --gradient-mesh:     radial-gradient(at 0% 0%, rgba(100,116,139,0.16) 0px, transparent 50%),
                         radial-gradient(at 100% 0%, rgba(14,165,233,0.14) 0px, transparent 50%),
                         radial-gradient(at 100% 100%, rgba(99,102,241,0.12) 0px, transparent 50%),
                         radial-gradient(at 0% 100%, rgba(203,213,225,0.14) 0px, transparent 50%);
    --shadow-lg: 0 20px 40px -12px rgba(51,65,85,0.22), 0 8px 16px -8px rgba(15,23,42,0.08);
    --shadow-glow: 0 0 0 4px rgba(51,65,85,0.18);
}

/* Dark-theme accent adjustments (boost luminance for AA contrast) */
[data-theme="dark"][data-accent="teal"]    {
    --brand-primary: #2dd4bf; --brand-accent: #22d3ee;
    --gradient-mesh: radial-gradient(at 0% 0%, rgba(45,212,191,0.22) 0px, transparent 50%),
                      radial-gradient(at 100% 0%, rgba(34,211,238,0.22) 0px, transparent 50%),
                      radial-gradient(at 100% 100%, rgba(56,189,248,0.18) 0px, transparent 50%),
                      radial-gradient(at 0% 100%, rgba(94,234,212,0.16) 0px, transparent 50%);
}
[data-theme="dark"][data-accent="emerald"] {
    --brand-primary: #34d399; --brand-accent: #2dd4bf;
    --gradient-mesh: radial-gradient(at 0% 0%, rgba(52,211,153,0.22) 0px, transparent 50%),
                      radial-gradient(at 100% 0%, rgba(45,212,191,0.22) 0px, transparent 50%),
                      radial-gradient(at 100% 100%, rgba(163,230,53,0.18) 0px, transparent 50%),
                      radial-gradient(at 0% 100%, rgba(110,231,183,0.16) 0px, transparent 50%);
}
[data-theme="dark"][data-accent="rose"]    {
    --brand-primary: #fb7185; --brand-accent: #f472b6;
    --gradient-mesh: radial-gradient(at 0% 0%, rgba(251,113,133,0.22) 0px, transparent 50%),
                      radial-gradient(at 100% 0%, rgba(244,114,182,0.22) 0px, transparent 50%),
                      radial-gradient(at 100% 100%, rgba(251,146,60,0.18) 0px, transparent 50%),
                      radial-gradient(at 0% 100%, rgba(253,164,175,0.16) 0px, transparent 50%);
}
[data-theme="dark"][data-accent="amber"]   {
    --brand-primary: #fbbf24; --brand-accent: #fb923c;
    --gradient-mesh: radial-gradient(at 0% 0%, rgba(251,191,36,0.22) 0px, transparent 50%),
                      radial-gradient(at 100% 0%, rgba(251,146,60,0.22) 0px, transparent 50%),
                      radial-gradient(at 100% 100%, rgba(248,113,113,0.18) 0px, transparent 50%),
                      radial-gradient(at 0% 100%, rgba(253,224,71,0.16) 0px, transparent 50%);
}
[data-theme="dark"][data-accent="slate"]   {
    --brand-primary: #94a3b8; --brand-accent: #38bdf8;
    --gradient-mesh: radial-gradient(at 0% 0%, rgba(148,163,184,0.18) 0px, transparent 50%),
                      radial-gradient(at 100% 0%, rgba(56,189,248,0.18) 0px, transparent 50%),
                      radial-gradient(at 100% 100%, rgba(129,140,248,0.16) 0px, transparent 50%),
                      radial-gradient(at 0% 100%, rgba(203,213,225,0.14) 0px, transparent 50%);
}

/* Dark theme */
[data-theme="dark"] {
    --surface-0: #0b0f1a;
    --surface-1: #111827;
    --surface-2: #1f2937;
    --surface-3: #374151;
    --surface-elevated: #1a2233;
    --border:        #1e293b;
    --border-strong: #334155;

    --text-primary:   #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted:     #64748b;

    --brand-primary:       #818cf8;
    --brand-primary-hover: #a5b4fc;
    --brand-accent:        #c084fc;

    --tint-success: rgba(16,185,129,0.14);
    --tint-warning: rgba(245,158,11,0.14);
    --tint-danger:  rgba(244,63,94,0.16);
    --tint-info:    rgba(14,165,233,0.16);
    --tint-brand:   rgba(99,102,241,0.16);

    --gradient-card: linear-gradient(135deg, rgba(99,102,241,0.16) 0%, rgba(168,85,247,0.16) 100%);
    --gradient-mesh: radial-gradient(at 0% 0%, rgba(99,102,241,0.22) 0px, transparent 50%),
                     radial-gradient(at 100% 0%, rgba(168,85,247,0.22) 0px, transparent 50%),
                     radial-gradient(at 100% 100%, rgba(236,72,153,0.18) 0px, transparent 50%),
                     radial-gradient(at 0% 100%, rgba(14,165,233,0.16) 0px, transparent 50%);

    --shadow-xs: 0 1px 1px rgba(0,0,0,0.30);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.40), 0 2px 4px rgba(0,0,0,0.30);
    --shadow-lg: 0 20px 40px -12px rgba(0,0,0,0.55), 0 8px 16px -8px rgba(0,0,0,0.40);

    --glass-bg: rgba(17, 24, 39, 0.72);
    --glass-border: rgba(30, 41, 59, 0.8);

    --chart-grid: #1e293b;
    --chart-axis: #64748b;

    color-scheme: dark;
}