/* ══════════════════════════════════════════════════════════════════════
   CCM Shared Design Tokens & Base Components
   Imported by all interfaces: dashboard, patient portal, mobile
   ══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces ── */
  --bg: #F7F8FA;
  --bg-secondary: #EDF0F4;
  --card: #FFFFFF;
  --card-hover: #FAFBFD;

  /* ── Brand / Header ── */
  --header: #0F1D35;
  --header-text: #FFFFFF;

  /* ── Accent (primary action) ── */
  --accent: #0C7FDA;
  --accent-hover: #0A6BC0;
  --accent-subtle: #E8F4FD;

  /* ── Semantic Status ── */
  --green: #16A34A;
  --green-light: #DCFCE7;
  --green-dark: #15803D;
  --yellow: #EAB308;
  --yellow-light: #FEF9C3;
  --yellow-dark: #854D0E;
  --red: #DC2626;
  --red-light: #FEE2E2;
  --red-dark: #991B1B;

  /* ── Extended Palette ── */
  --purple: #7C3AED;
  --purple-light: #EDE9FE;
  --orange: #EA580C;
  --orange-light: #FFF7ED;
  --coral: #FF754C;

  /* ── Neutrals ── */
  --text-primary: #111827;
  --text-secondary: #4B5563;
  --text-tertiary: #9CA3AF;
  --border: #E5E7EB;
  --border-strong: #D1D5DB;
  --divider: #F3F4F6;

  /* ── Elevation ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.12);

  /* ── Radii ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 9999px;

  /* ── Typography Scale ── */
  --text-xs: 0.6875rem;    /* 11px */
  --text-sm: 0.8125rem;    /* 13px */
  --text-base: 0.875rem;   /* 14px */
  --text-md: 1rem;          /* 16px */
  --text-lg: 1.125rem;      /* 18px */
  --text-xl: 1.375rem;      /* 22px */
  --text-2xl: 1.75rem;      /* 28px */

  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;

  /* ── Spacing ── */
  --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;

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;

  /* ── Sidebar ── */
  --sidebar-width: 220px;
  --sidebar-collapsed-width: 64px;

  /* ── Legacy aliases (backwards compat during migration) ── */
  --navy: var(--header);
  --gray: var(--text-secondary);
  --text: var(--text-primary);
  --text2: var(--text-secondary);
  --radius: var(--radius-md);
  --shadow: var(--shadow-md);
}

/* ══════════════════════════════════════════════════════════════════════
   Dark Mode
   ══════════════════════════════════════════════════════════════════════ */

[data-theme="dark"] {
  /* True black background, minimal contrast cards */
  --bg: #000000;
  --bg-secondary: #0a0a0a;
  --card: #111111;
  --card-hover: #161616;
  --header: #050505;
  --accent: #4a9ede;
  --accent-hover: #6bb3e8;
  --accent-subtle: #0d1a28;
  --green: #3da865;
  --green-light: #0a1a0f;
  --green-dark: #7dd3a0;
  --yellow: #c9a020;
  --yellow-light: #141008;
  --yellow-dark: #d4b85c;
  --red: #d04848;
  --red-light: #1a0808;
  --red-dark: #e08080;
  --purple: #8b7abf;
  --purple-light: #0e0a1a;
  --orange: #c07030;
  --orange-light: #140c06;
  --text-primary: #c8ccd0;
  --text-secondary: #707880;
  --text-tertiary: #4a5058;
  --border: #1a1a1a;
  --border-strong: #252525;
  --divider: #111111;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.8);
  --navy: var(--header);
  --gray: var(--text-secondary);
  --text: var(--text-primary);
  --text2: var(--text-secondary);
}

/* ══════════════════════════════════════════════════════════════════════
   Icon Base Styles
   ══════════════════════════════════════════════════════════════════════ */

.icon-nav { flex-shrink: 0; }
.nav-icon svg { vertical-align: middle; }

/* ══════════════════════════════════════════════════════════════════════
   Skeleton Loader
   ══════════════════════════════════════════════════════════════════════ */

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton {
  background: linear-gradient(90deg, var(--divider) 25%, var(--bg-secondary) 37%, var(--divider) 63%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
  color: transparent !important;
}
.skeleton * { visibility: hidden; }

/* ══════════════════════════════════════════════════════════════════════
   View Transitions
   ══════════════════════════════════════════════════════════════════════ */

@keyframes viewEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.view-entering {
  animation: viewEnter var(--duration-normal) var(--ease-out) both;
}