/* ASSIDU.ai V2 Design System — calm, accessible liquid surfaces */
:root {
    /* ── Brand ── */
    --brand: #edfffe;
    --brand-deep: #3ecdc6;
    --brand-glow: rgba(62,205,198,0.22);

    /* ── Backgrounds — quiet neutral canvas with a restrained mint tint ── */
    --bg: #f7fbfa;
    --bg-alt: #ffffff;
    --card: rgba(255,255,255,0.82);
    --card-hover: rgba(255,255,255,0.96);
    --card-alt: rgba(235,246,244,0.72);

    --text: #14201f;
    --text-secondary: #354846;
    --text-muted: #5d716f;
    --text-inverse: #ffffff;

    /* ── Liquid surface borders — visible without looking heavy ── */
    --border: rgba(21,89,84,0.20);
    --border-light: rgba(21,89,84,0.11);

    /* ── Brand colors ── */
    --primary: #3ecdc6;
    --primary-hover: #2fb8b1;
    --primary-light: rgba(62,205,198,0.12);
    --primary-ink: #0b7d75;   /* deep teal — brand accent used as TEXT on light surfaces (WCAG AA on white) */
    --on-primary: #08312d;    /* dark teal ink — text/icons/labels sitting ON a bright mint fill */
    /* Semantic status colours read too light AS TEXT on white (badges/labels). These -ink variants
       are the deepened, AA-on-white versions; the base tokens stay bright for fills/dots/borders. */
    --success-ink: #047857;
    --warning-ink: #b45309;
    --danger-ink:  #b91c1c;
    --accent-ink:  #0f766e;
    --implant-ink: #b45309;
    --ortho-ink: #7e22ce;
    --perio-ink: #1d4ed8;
    --resto-ink: #047857;
    --info-ink: #1d4ed8;
    --accent: #00b4a0;
    --accent-light: rgba(0,180,160,0.10);

    /* ── Specialty colors ── */
    --ortho: #a855f7;
    --ortho-light: rgba(168,85,247,0.10);
    --perio: #3b82f6;
    --perio-light: rgba(59,130,246,0.10);
    --implant: #f59e0b;
    --implant-light: rgba(245,158,11,0.10);
    --endo: #ef4444;
    --endo-light: rgba(239,68,68,0.10);
    --resto: #10b981;
    --resto-light: rgba(16,185,129,0.10);
    --lab: #6b7280;
    --lab-light: rgba(107,114,128,0.10);

    /* ── Status ── */
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;
    --success-action: #047857;
    --warning-action: #a04b08;
    --danger-action: #b91c1c;

    /* ── Shadows — soft, neutral and hierarchical ── */
    --shadow-sm: 0 1px 2px rgba(9,30,28,0.05), 0 2px 6px rgba(9,30,28,0.04);
    --shadow: 0 8px 24px rgba(9,30,28,0.07), 0 2px 8px rgba(9,30,28,0.04);
    --shadow-lg: 0 20px 54px rgba(9,30,28,0.12), 0 6px 18px rgba(9,30,28,0.07);
    --shadow-glow: 0 14px 40px rgba(15,104,98,0.12), 0 4px 14px rgba(9,30,28,0.06);

    /* ── Spacing — 4pt foundation ── */
    --space-2xs: 2px;
    --space-xs: 4px;
    --space-sm: 8px;
    --space-3: 12px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* ── Typography ── */
    --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 15px;
    --text-lg: 17px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 28px;
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    /* ── Border radius — pill-like, generous ── */
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 26px;
    --radius-full: 50%;

    /* ── Layout and controls ── */
    --sidebar-width: 264px;
    --topbar-height: 64px;
    --content-max: 1600px;
    --control-height: 44px;
    --control-height-sm: 36px;
    --focus-ring: 0 0 0 3px rgba(62,205,198,0.28);

    /* ── Transitions — smooth, Apple-like ── */
    --transition: all 0.2s cubic-bezier(0.25,0.46,0.45,0.94);
    --transition-slow: all 0.35s cubic-bezier(0.25,0.46,0.45,0.94);

    /* ── Liquid Glass tokens ── */
    --glass-bg: rgba(255,255,255,0.78);
    --glass-border: rgba(255,255,255,0.82);
    --glass-blur: blur(28px) saturate(150%);
    --glass-inner-glow: inset 0 1px 0 rgba(255,255,255,0.72);
    --surface: rgba(255,255,255,0.88);
    --surface-elevated: rgba(255,255,255,0.96);
    --surface-secondary: var(--card);
    --surface-tertiary: var(--card-alt);
    --bg-secondary: var(--bg-alt);
    --text-primary: var(--text);
    --overlay-bg: rgba(5,20,19,0.46);
    --bg-subtle: rgba(62,205,198,0.04);
}

/* ════════════════════════════════════════════════════════
   Dark Theme — Liquid Glass on deep teal-black
   ════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    --bg: #0b1515;
    --bg-alt: #111f1f;
    --card: rgba(255,255,255,0.075);
    --card-hover: rgba(255,255,255,0.115);
    --card-alt: rgba(79,224,216,0.065);

    --text: #f4fbfa;
    --text-secondary: #b8cdcb;
    --text-muted: #89a6a3;
    --text-inverse: #ffffff;

    --border: rgba(137,205,200,0.22);
    --border-light: rgba(137,205,200,0.12);

    --primary: #4fe0d8;
    --primary-hover: #6aeae4;
    --primary-light: rgba(79,224,216,0.15);
    --primary-ink: #4fe0d8;   /* dark theme: teal-as-text sits on DARK bg — keep it bright mint */
    --on-primary: #08312d;    /* dark teal ink — text/icons sitting ON a bright mint fill */
    /* dark theme: badge tint bg is dark, so status text stays bright (= base tokens) */
    --success-ink: #34d399;
    --warning-ink: #fbbf24;
    --danger-ink:  #f87171;
    --accent-ink:  #00e4c8;
    --implant-ink: #fbbf24;
    --ortho-ink: #d8b4fe;
    --perio-ink: #93c5fd;
    --resto-ink: #6ee7b7;
    --info-ink: #93c5fd;
    --accent: #00e4c8;
    --accent-light: rgba(0,228,200,0.15);

    --ortho: #c084fc;
    --ortho-light: rgba(192,132,252,0.15);
    --perio: #60a5fa;
    --perio-light: rgba(96,165,250,0.15);
    --implant: #fbbf24;
    --implant-light: rgba(251,191,36,0.15);
    --endo: #f87171;
    --endo-light: rgba(248,113,113,0.15);
    --resto: #34d399;
    --resto-light: rgba(52,211,153,0.15);
    --lab: #9ca3af;
    --lab-light: rgba(156,163,175,0.15);

    --success: #34d399;
    --warning: #fbbf24;
    --danger: #f87171;
    --info: #60a5fa;
    --success-action: #047857;
    --warning-action: #a04b08;
    --danger-action: #dc2626;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(62,205,198,0.05);
    --shadow: 0 4px 16px rgba(0,0,0,0.5), 0 2px 8px rgba(62,205,198,0.06);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.6), 0 4px 16px rgba(62,205,198,0.08);
    --shadow-glow: 0 0 30px rgba(62,205,198,0.12), 0 4px 16px rgba(0,0,0,0.4);

    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --radius-xl: 26px;

    --glass-bg: rgba(17,31,31,0.82);
    --glass-border: rgba(255,255,255,0.12);
    --glass-blur: blur(28px) saturate(135%);
    --glass-inner-glow: inset 0 1px 0 rgba(255,255,255,0.09);
    --surface: rgba(17,31,31,0.92);
    --surface-elevated: rgba(31,48,48,0.96);
    --overlay-bg: rgba(0,0,0,0.68);
    --bg-subtle: rgba(62,205,198,0.05);
}

/* ===== White-label theme: app.smileartpavilion.com -> DARK STEEL METALLIC (brushed gunmetal, no assidu teal) =====
   Redefines the brand tokens for the whole <body> subtree, so anything using var(--primary)/
   var(--bg)/var(--text) etc. re-themes automatically. Higher specificity than the :root and
   [data-theme] rules, so it wins in either theme. Default hosts are untouched. DARK theme: graphite
   glass panels on the brushed-metal canvas with WHITE text (revamped 2026-07-16 from the earlier
   light-silver look). Category colors (ortho/implant) and status colors (success/danger/warning)
   are intentionally kept. The actual metallic gradients, sheen and bevels live in layouts.css. */
body.brand-metallic {
    --bg: #14161b;
    --bg-alt: #1b1e25;
    --bg-subtle: rgba(255,255,255,0.04);

    /* Dark graphite glass panels floating on the brushed-metal canvas — translucent so the metal
       glows through, opaque enough that white text stays crisp (a proper dark theme). */
    --card: rgba(28,32,40,0.80);
    --card-hover: rgba(42,48,58,0.88);
    --card-alt: rgba(22,25,32,0.82);
    --surface: rgba(26,30,38,0.84);
    --surface-elevated: rgba(40,45,55,0.92);
    --overlay-bg: rgba(6,8,12,0.68);

    --text: #eef1f5;
    --text-secondary: #c3cad3;
    --text-muted: #99a2ae;
    --text-inverse: #14161b;

    --border: rgba(255,255,255,0.14);
    --border-light: rgba(255,255,255,0.08);

    /* polished steel / chrome-blue accent, brightened so it reads on the dark surfaces */
    --primary: #5d6b81;
    --primary-hover: #6d7c94;
    --primary-light: rgba(124,138,158,0.16);
    --primary-ink: #aeb9c8;   /* smileart: light steel accent-as-text on dark surfaces */
    --on-primary: #ffffff;    /* white reads on the steel primary */
    --accent: #8595a8;
    --accent-light: rgba(133,149,168,0.16);

    /* cool metallic sheen + deep neutral depth for the dark shell */
    --brand-glow: rgba(180,196,216,0.35);
    --shadow-glow: 0 0 22px rgba(150,170,195,0.28), 0 6px 22px rgba(0,0,0,0.5);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
    --shadow: 0 6px 22px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
    --shadow-lg: 0 18px 50px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.09);

    /* glass surfaces (inputs, modals, cards) → dark silver glass */
    --glass-bg: rgba(255,255,255,0.06);
    --glass-border: rgba(255,255,255,0.14);
    --glass-inner-glow: inset 0 1px 0 rgba(255,255,255,0.08);
}