/**
 * Bharat Swasthya Setu — Design Tokens (P0)
 * Spec: docs/ui_ux_healthcare_os_design_spec.md
 * Use CSS variables only; no one-off hex in components.
 */

:root {
  color-scheme: light;
  /* ── Color · Light ──
     Premium medical SaaS — Deep Medical Blue, Soft Cyan, Emerald.
     Restrained, calm, hospital-grade. Surfaces are never flat white. */
  --color-bg-app: #f3f6f9;
  --color-bg-surface: #ffffff;
  --color-bg-elevated: #fbfcfe;
  --color-bg-muted: #e8eef4;
  --color-bg-hero: #0a1628;
  --color-surface-dark-end: #12253f;
  /* Soft cyan highlight on navy/dark gradients (hero, footer) */
  --color-highlight-on-dark: #7ec8d9;

  --color-brand-primary: #0f4c81;
  --color-brand-primary-hover: #0a3a66;
  --color-brand-soft: #e7f0f7;

  --color-accent-care: #0f8a6b;
  --color-accent-care-hover: #0b6e55;
  --color-accent-care-soft: #e3f5ef;

  /* Soft cyan — secondary trust accent, used for "verified" states */
  --color-accent-teal: #1a9bb5;
  --color-accent-teal-hover: #147e94;
  --color-accent-teal-soft: #e2f4f7;

  /* Solid button-background variants: guaranteed readable with white text.
     (Text/border usages of the base colors above stay theme-adaptive;
     these "-solid" tokens exist so a colored button never goes pastel-on-white
     and loses contrast in dark mode.) */
  --color-brand-primary-solid: #0f4c81;
  --color-accent-care-solid: #0d7a5f;
  --color-accent-teal-solid: #147e94;
  --color-status-warn-solid: #9c6a0d;
  --color-status-info-solid: #1a7aad;

  --color-text-primary: #0f1a2a;
  --color-text-secondary: #536274;
  --color-text-tertiary: #8492a3;
  --color-text-inverse: #ffffff;
  --color-on-brand: #ffffff;

  --color-border-subtle: #dde5ee;
  --color-border-strong: #b8c4d2;
  --color-focus: #0f4c81;

  --color-status-info: #1e88c7;
  --color-status-info-soft: #e3f2fb;
  --color-status-warn: #b4790f;
  --color-status-warn-soft: #faf0db;
  --color-status-danger: #c6483f;
  --color-status-danger-soft: #f9e7e5;
  --color-status-danger-solid: #b03b33;
  --color-status-neutral: #5a6474;
  --color-status-neutral-soft: #edf1f6;

  /* Verified — distinct from generic success (teal, not emerald) */
  --color-status-verified: #0e93a6;
  --color-status-verified-soft: #e1f3f6;
  --color-status-verified-solid: #0b7d8d;

  /* Queue / token / live-status — distinct calm violet */
  --color-status-queue: #6d5fd1;
  --color-status-queue-soft: #eeecfb;
  --color-status-queue-solid: #5a4cbd;

  /* Emergency — warm coral, deliberately distinct from Error red */
  --color-status-emergency: #e8654a;
  --color-status-emergency-soft: #fce9e4;
  --color-status-emergency-solid: #c4503a;

  /* Setu atmosphere */
  --color-paper: #f3f6f9;
  --color-ink: #0f1a2a;
  --color-ink-muted: #536274;
  --color-bridge: #0f4c81;
  --color-care: #0f8a6b;
  --color-surface-glass: rgba(255, 255, 255, 0.92);
  --color-fill-strong: #0f1a2a;

  /* Portal top chrome — always dark ink (do not use text-primary for this) */
  --color-chrome: #0a1628;
  --color-chrome-deep: #061018;
  --color-chrome-mid: #152a45;
  --color-chrome-border: rgba(255, 255, 255, 0.12);
  --color-chrome-text: #ffffff;
  --color-chrome-muted: rgba(255, 255, 255, 0.7);
  --color-chrome-soft: rgba(255, 255, 255, 0.12);

  /* Portal accent (overridden per data-portal) */
  --portal-accent: var(--color-brand-primary);
  --portal-accent-hover: var(--color-brand-primary-hover);
  --portal-accent-soft: var(--color-brand-soft);
  --portal-accent-solid: var(--color-brand-primary-solid);

  /* ── Typography ── */
  --font-display: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-sans: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-xs: 0.75rem;    /* 12 */
  --text-sm: 0.8125rem;  /* 13 */
  --text-base: 0.875rem; /* 14 */
  --text-md: 0.9375rem;  /* 15 */
  --text-lg: 1rem;       /* 16 */
  --text-xl: 1.125rem;   /* 18 */
  --text-2xl: 1.25rem;   /* 20 */
  --text-3xl: 1.5rem;    /* 24 */
  --text-4xl: 1.75rem;   /* 28 */
  --text-5xl: 2rem;      /* 32 */
  --text-6xl: 2.5rem;    /* 40 */
  --text-7xl: 3rem;      /* 48 */
  --text-8xl: 3.5rem;    /* 56 */

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.3;
  --leading-relaxed: 1.55;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;
  
  /* Letter spacing for headings */
  --tracking-tight: -0.025em;
  --tracking-tighter: -0.035em;
  --tracking-wide: 0.015em;
  --tracking-wider: 0.025em;

  /* ── Spacing ── */
  --space-05: 0.125rem;  /* 2px - micro spacing */
  --space-1: 0.25rem;    /* 4px */
  --space-15: 0.375rem;  /* 6px - tight */
  --space-2: 0.5rem;     /* 8px - compact */
  --space-25: 0.625rem;  /* 10px */
  --space-3: 0.75rem;    /* 12px - cozy */
  --space-4: 1rem;       /* 16px - base */
  --space-5: 1.25rem;    /* 20px - comfortable */
  --space-6: 1.5rem;     /* 24px - spacious */
  --space-7: 1.75rem;    /* 28px */
  --space-8: 2rem;       /* 32px - generous */
  --space-10: 2.5rem;    /* 40px - ample */
  --space-12: 3rem;      /* 48px - expansive */
  --space-16: 4rem;      /* 64px - luxurious */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  
  /* Content max-widths for hierarchy */
  --content-xs: 24rem;   /* 384px - tight text */
  --content-sm: 32rem;   /* 512px - comfortable reading */
  --content-md: 42rem;   /* 672px - article width */
  --content-lg: 56rem;   /* 896px - wide content */
  --content-xl: 72rem;   /* 1152px - section max */

  /* ── Radius (restrained — not pill-everything) ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-3xl: 24px;
  --radius-pill: 999px;

  /* ── Elevation (subtle, intentional) ── */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(10, 22, 40, 0.04);
  --shadow-2: 0 4px 14px rgba(10, 22, 40, 0.05);
  --shadow-3: 0 12px 28px rgba(10, 22, 40, 0.07);
  --shadow-4: 0 22px 48px rgba(10, 22, 40, 0.09);
  --shadow-float: 0 8px 24px rgba(10, 22, 40, 0.07);
  --shadow-glass: 0 2px 12px rgba(10, 22, 40, 0.05);
  --shadow-desk: 0 1px 0 rgba(10, 22, 40, 0.04), 0 14px 32px rgba(10, 22, 40, 0.07);

  /* ── Motion ── */
  --motion-fast: 120ms ease-out;
  --motion-base: 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-slow: 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --motion-spring: 420ms cubic-bezier(0.34, 1.2, 0.64, 1);

  /* ── Layout ── */
  --nav-width: 240px;
  --nav-width-collapsed: 72px;
  --header-height: 56px;
  --content-max-ops: 1440px;
  --content-max-marketing: 1280px;
  --touch-min: 44px;
  --touch-dense: 36px;
  --focus-ring: 0 0 0 2px var(--color-bg-surface), 0 0 0 4px var(--color-focus);

  /* ── Legacy aliases (bridge existing portal CSS) ── */
  --bss-blue: var(--color-brand-primary);
  --bss-blue-dark: var(--color-brand-primary-hover);
  --bss-blue-soft: var(--color-brand-soft);
  --bss-green: var(--color-accent-care);
  --bss-green-dark: var(--color-accent-care-hover);
  --bss-green-soft: var(--color-accent-care-soft);
  --bss-navy: var(--color-bg-hero);
  --bss-ink: var(--color-text-primary);
  --bss-text: var(--color-text-primary);
  --bss-muted: var(--color-text-secondary);
  --bss-border: var(--color-border-subtle);
  --bss-surface: var(--color-bg-surface);
  --bss-surface-glass: rgba(255, 255, 255, 0.85);
  --bss-bg: var(--color-bg-app);
  --bss-radius: var(--radius-lg);
  --bss-radius-lg: var(--radius-xl);
  --bss-shadow-sm: var(--shadow-1);
  --bss-shadow: var(--shadow-2);
  --bss-shadow-lg: var(--shadow-3);

  --admin-blue: var(--color-brand-primary);
  --admin-navy: var(--color-text-primary);
  --admin-green: var(--color-accent-care);
  --admin-border: var(--color-border-subtle);
  --admin-radius: var(--radius-lg);
  --admin-shadow: var(--shadow-2);
  --admin-shadow-hover: var(--shadow-3);

  /* Bootstrap 5 light bridge */
  --bs-body-bg: var(--color-bg-app);
  --bs-body-color: var(--color-text-primary);
  --bs-secondary-color: var(--color-text-secondary);
  --bs-tertiary-bg: var(--color-bg-muted);
  --bs-border-color: var(--color-border-subtle);
  --bs-emphasis-color: var(--color-text-primary);
  --bs-primary: var(--color-brand-primary);
  --bs-primary-rgb: 15, 76, 129;
  --bs-link-color: var(--color-brand-primary);
  --bs-link-hover-color: var(--color-brand-primary-hover);

  /* ── --ds-* bridge (ops portals without assuming design-system-premium alone) ── */
  --ds-bg-app: var(--color-bg-app);
  --ds-bg-surface: var(--color-bg-surface);
  --ds-bg-surface-secondary: var(--color-bg-muted);
  --ds-bg-elevated: var(--color-bg-elevated);
  --ds-border-subtle: var(--color-border-subtle);
  --ds-border-medium: var(--color-border-strong);
  --ds-border-strong: var(--color-border-strong);
  --ds-primary: var(--color-brand-primary);
  --ds-primary-hover: var(--color-brand-primary-hover);
  --ds-primary-soft: var(--color-brand-soft);
  --ds-primary-solid: var(--color-brand-primary-solid);
  --ds-medical: var(--color-accent-care);
  --ds-medical-hover: var(--color-accent-care-hover);
  --ds-medical-soft: var(--color-accent-care-soft);
  --ds-medical-solid: var(--color-accent-care-solid);
  --ds-verified: var(--color-accent-teal);
  --ds-verified-soft: var(--color-accent-teal-soft);
  --ds-text-primary: var(--color-text-primary);
  --ds-text-secondary: var(--color-text-secondary);
  --ds-text-tertiary: var(--color-text-tertiary);
  --ds-radius-sm: var(--radius-sm);
  --ds-radius-md: var(--radius-md);
  --ds-radius-lg: var(--radius-lg);
  --ds-radius-xl: var(--radius-xl);
  --ds-radius-2xl: var(--radius-2xl);
  --ds-radius-full: var(--radius-pill);
  --ds-elevation-1: var(--shadow-1);
  --ds-elevation-surface: var(--shadow-1);
  --ds-elevation-floating: var(--shadow-float);
  --ds-space-1: var(--space-1);
  --ds-space-1-5: var(--space-15);
  --ds-space-2: var(--space-2);
  --ds-space-3: var(--space-3);
  --ds-space-4: var(--space-4);
  --ds-space-5: var(--space-5);
  --ds-space-6: var(--space-6);
  --ds-space-8: var(--space-8);
  --ds-text-body: var(--text-base);
  --ds-text-body-sm: var(--text-sm);
  --ds-text-title: var(--text-xl);
  --ds-weight-semibold: var(--weight-semibold);
  --ds-weight-bold: var(--weight-bold);
  --ds-duration-fast: var(--motion-fast);
  --ds-duration-normal: var(--motion-base);
  --ds-ease-smooth: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ds-glass-bg: var(--color-surface-glass);
  --ds-glass-border: var(--color-border-subtle);
  --ds-glass-blur: 12px;
}

/* ── Dark theme · Premium healthcare dark (high-visibility) ──
   NOT a simple inversion of light: deep navy-charcoal surfaces (never
   pure black), lightened-but-still-calm brand hues, AA body+muted text,
   white-on-brand buttons via dedicated -solid tokens. */
[data-theme="dark"] {
  color-scheme: dark;
  --color-bg-app: #0d1420;
  --color-bg-surface: #16202e;
  --color-bg-elevated: #1e2a3a;
  --color-bg-muted: #24313f;
  --color-bg-hero: #080d16;
  --color-surface-dark-end: #121c32;
  --color-highlight-on-dark: #7ec8d9;

  --color-brand-primary: #6ba3d4;
  --color-brand-primary-hover: #8bb8df;
  --color-brand-soft: #1a2f45;

  --color-accent-care: #3fbf95;
  --color-accent-care-hover: #63d1ac;
  --color-accent-care-soft: #123c30;

  --color-accent-teal: #4db8cc;
  --color-accent-teal-hover: #6ecadb;
  --color-accent-teal-soft: #123a42;

  --color-text-primary: #f1f4f9;
  --color-text-secondary: #b9c4d3;
  --color-text-tertiary: #8896a8;
  --color-text-inverse: #ffffff;
  --color-on-brand: #ffffff;

  --color-border-subtle: #2a3648;
  --color-border-strong: #4a5972;
  --color-focus: #9db9f5;

  --color-status-info: #6fc2ed;
  --color-status-info-soft: rgba(111, 194, 237, 0.18);
  --color-status-warn: #e8b858;
  --color-status-warn-soft: rgba(232, 184, 88, 0.18);
  --color-status-danger: #e68a82;
  --color-status-danger-soft: rgba(230, 138, 130, 0.18);
  --color-status-neutral: #b9c4d3;
  --color-status-neutral-soft: rgba(185, 196, 211, 0.14);

  /* Verified / Queue — distinct semantic hues (dark) */
  --color-status-verified: #5fcbdb;
  --color-status-verified-soft: rgba(95, 203, 219, 0.18);
  --color-status-queue: #a79af0;
  --color-status-queue-soft: rgba(167, 154, 240, 0.18);

  /* Emergency — warm coral, lightened for dark bg but still distinct from Error */
  --color-status-emergency: #f5977e;
  --color-status-emergency-soft: rgba(245, 151, 126, 0.18);

  /* Solid button-background variants — deliberately darker/more saturated
     than the text-optimized colors above, so white button labels stay
     readable (AA-friendly) against them in dark mode. */
  --color-brand-primary-solid: #0f4c81;
  --color-accent-care-solid: #0f8a6b;
  --color-accent-teal-solid: #1a9bb5;
  --color-status-warn-solid: #9c6a0d;
  --color-status-info-solid: #1b74a9;
  --color-status-danger-solid: #b03b33;
  --color-status-verified-solid: #0b7d8d;
  --color-status-queue-solid: #5a4cbd;
  --color-status-emergency-solid: #c4503a;

  --color-paper: var(--color-bg-app);
  --color-ink: var(--color-text-primary);
  --color-ink-muted: var(--color-text-secondary);
  --color-bridge: var(--color-brand-primary);
  --color-care: var(--color-accent-care);
  --color-surface-glass: rgba(22, 32, 46, 0.92);
  --color-fill-strong: #080d16;

  /* Keep shell headers dark so white brand text stays readable */
  --color-chrome: #0c121e;
  --color-chrome-deep: #070a12;
  --color-chrome-mid: #182640;
  --color-chrome-border: rgba(255, 255, 255, 0.14);
  --color-chrome-text: #f1f4f9;
  --color-chrome-muted: rgba(241, 244, 249, 0.72);
  --color-chrome-soft: rgba(255, 255, 255, 0.1);

  --bss-surface-glass: rgba(22, 32, 46, 0.9);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 6px 18px rgba(0, 0, 0, 0.4);
  --shadow-3: 0 14px 36px rgba(0, 0, 0, 0.5);
  --shadow-4: 0 28px 56px rgba(0, 0, 0, 0.58);
  --shadow-float: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-glass: 0 4px 24px rgba(0, 0, 0, 0.35);
  --shadow-desk: 0 2px 0 rgba(0, 0, 0, 0.25), 0 18px 40px rgba(0, 0, 0, 0.4);
  --focus-ring: 0 0 0 2px var(--color-bg-surface), 0 0 0 4px var(--color-focus);

  /* Bootstrap 5 variable bridge */
  --bs-body-bg: var(--color-bg-app);
  --bs-body-color: var(--color-text-primary);
  --bs-secondary-color: var(--color-text-secondary);
  --bs-tertiary-bg: var(--color-bg-muted);
  --bs-border-color: var(--color-border-subtle);
  --bs-emphasis-color: var(--color-text-primary);
  --bs-link-color: var(--color-brand-primary);
  --bs-link-hover-color: var(--color-brand-primary-hover);
  --bs-heading-color: var(--color-text-primary);
  --bs-primary: var(--color-brand-primary);
  --bs-primary-rgb: 107, 163, 212;
  --bs-success: var(--color-accent-care);
  --bs-info: var(--color-status-info);
  --bs-warning: var(--color-status-warn);
  --bs-danger: var(--color-status-danger);
}

/* ── Portal accents ── */
[data-portal="admin"] {
  --portal-accent: var(--color-brand-primary);
  --portal-accent-hover: var(--color-brand-primary-hover);
  --portal-accent-soft: var(--color-brand-soft);
  --portal-accent-solid: var(--color-brand-primary-solid);
}

[data-portal="clinic"] {
  /* Desk CTAs use Deep Medical Blue; emerald stays on --clinic-accent / care chips */
  --portal-accent: var(--color-brand-primary);
  --portal-accent-hover: var(--color-brand-primary-hover);
  --portal-accent-soft: var(--color-brand-soft);
  --portal-accent-solid: var(--color-brand-primary-solid);
}

[data-portal="vendor"] {
  --portal-accent: var(--color-brand-primary);
  --portal-accent-hover: var(--color-brand-primary-hover);
  --portal-accent-soft: var(--color-brand-soft);
  --portal-accent-solid: var(--color-brand-primary-solid);
}

[data-portal="mr"] {
  --portal-accent: var(--color-status-info);
  --portal-accent-hover: #15628f;
  --portal-accent-soft: var(--color-status-info-soft);
  --portal-accent-solid: var(--color-status-info-solid);
}

[data-theme="dark"][data-portal="mr"] {
  --portal-accent-hover: #9ad8f5;
}

[data-portal="distributor"] {
  --portal-accent: var(--color-accent-care);
  --portal-accent-hover: var(--color-accent-care-hover);
  --portal-accent-soft: var(--color-accent-care-soft);
  --portal-accent-solid: var(--color-accent-care-solid);
}

[data-portal="patient"] {
  --portal-accent: var(--color-brand-primary);
  --portal-accent-hover: var(--color-brand-primary-hover);
  --portal-accent-soft: var(--color-brand-soft);
  --portal-accent-solid: var(--color-brand-primary-solid);
}

[data-portal="public"]:not([data-theme="dark"]) {
  --portal-accent: var(--color-brand-primary);
  --portal-accent-hover: var(--color-brand-primary-hover);
  --portal-accent-soft: var(--color-brand-soft);
  --portal-accent-solid: var(--color-brand-primary-solid);

  /* Light public remaps — must not override dark theme text tokens */
  --color-text-primary: #0f1a2a;
  --color-text-secondary: #536274;
  --color-bg-app: #f3f6f9;
  --bss-blue: var(--color-brand-primary);
  --bss-blue-dark: var(--color-brand-primary-hover);
  --bss-blue-soft: var(--color-brand-soft);
  --bs-link-color: var(--color-brand-primary);
  --bs-link-hover-color: var(--color-brand-primary-hover);
  --bs-primary: var(--color-brand-primary);
  --bs-primary-rgb: 15, 76, 129;
}

[data-portal="public"] {
  --portal-accent: var(--color-brand-primary);
  --portal-accent-hover: var(--color-brand-primary-hover);
  --portal-accent-soft: var(--color-brand-soft);
  --portal-accent-solid: var(--color-brand-primary-solid);
}

/* Public dark — medical blue trust (aligned with :root dark tokens) */
[data-theme="dark"][data-portal="public"] {
  --color-bg-app: #0d1420;
  --color-bg-muted: #24313f;
  --color-bg-surface: #16202e;
  --color-bg-elevated: #1e2a3a;
  --color-text-primary: #f1f4f9;
  --color-text-secondary: #b9c4d3;
  --color-text-tertiary: #8896a8;
  --color-border-subtle: #2a3648;
  --color-border-strong: #4a5972;
  --color-brand-primary: #6ba3d4;
  --color-brand-primary-hover: #8bb8df;
  --color-brand-soft: #1a2f45;
  --color-brand-primary-solid: #0f4c81;
  --color-focus: #8bb8df;
  --color-highlight-on-dark: #7ec8d9;
  --portal-accent: var(--color-brand-primary);
  --portal-accent-hover: var(--color-brand-primary-hover);
  --portal-accent-soft: var(--color-brand-soft);
  --portal-accent-solid: var(--color-brand-primary-solid);
  --bss-blue: var(--color-brand-primary);
  --bss-blue-dark: var(--color-brand-primary-hover);
  --bss-blue-soft: var(--color-brand-soft);

  --ds-bg-app: var(--color-bg-app);
  --ds-bg-surface: var(--color-bg-surface);
  --ds-bg-surface-secondary: #131c29;
  --ds-bg-elevated: var(--color-bg-elevated);
  --ds-bg-card: #1a2532;
  --ds-text-primary: var(--color-text-primary);
  --ds-text-secondary: var(--color-text-secondary);
  --ds-text-tertiary: var(--color-text-tertiary);
  --ds-border-subtle: var(--color-border-subtle);
  --ds-border-medium: var(--color-border-strong);
  --ds-primary: var(--color-brand-primary);
  --ds-primary-hover: var(--color-brand-primary-hover);
  --ds-primary-soft: rgba(107, 163, 212, 0.14);
  --ds-primary-glow: rgba(107, 163, 212, 0.22);
  --ds-primary-solid: #0f4c81;
}

[data-portal="lab"] {
  --portal-accent: var(--color-status-info);
  --portal-accent-hover: #15628f;
  --portal-accent-soft: var(--color-status-info-soft);
  --portal-accent-solid: var(--color-status-info-solid);
}

[data-theme="dark"][data-portal="lab"] {
  --portal-accent-hover: #9ad8f5;
}

[data-portal="pharmacy"] {
  --portal-accent: var(--color-accent-care);
  --portal-accent-hover: var(--color-accent-care-hover);
  --portal-accent-soft: var(--color-accent-care-soft);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0.01ms;
    --motion-base: 0.01ms;
    --motion-slow: 0.01ms;
    --motion-spring: 0.01ms;
  }
}