/*
  366Route design tokens, derived from the brand's three logo variants — see docs/PROGRESS.md
  for the "placeholder logo" note and docs/ARCHITECTURE.md for the DeploymentMode → BrandLogo
  mapping. Change the palette from this single file only; components must never hard-code colors.
*/
:root {
  color-scheme: light;

  /* Brand */
  --color-primary: #0A84F1; /* Electric Azure — "366", primary action, links */
  --color-primary-dark: #023581; /* hover, gradient low end */
  --color-primary-darker: #012A5E; /* dark accent */
  --color-accent: #16C7FC; /* Electric Cyan — glow, focus ring */
  --color-cyan-light: #7FD0F5; /* Sea·Land·Air — secondary accent */
  --color-silver: #DDE3EA; /* Route metallic — heading/wordmark */

  /* Dark surfaces (login + shell) */
  --bg-base: #00081C;
  --surface-1: #061530;
  --surface-2: #0C1E3D;
  --border-dark: #1B2F52;
  --text-on-dark: #F4F8FD;
  --muted-on-dark: #9FB0C9;

  /* Light surfaces (content) */
  --surface-light: #FFFFFF;
  --surface-card: rgba(255, 255, 255, 0.96);
  --surface-hover: #F8FBFF;
  --surface-tinted: #EAF4FF;
  --gray-50: #F5F7FA;
  --gray-100: #EEF3F8;
  --gray-200: #E8EDF3;
  --gray-300: #D5DEE9;
  --slate: #64748B;
  --ink: #1E293B;
  --ink-strong: #0F1F35;
  --page-background: #F5F7FA;
  --header-background: rgba(255, 255, 255, 0.88);
  --content-background-top: #F8FAFC;
  --info-soft: #F0F9FF;
  --info-soft-strong: #075985;
  --success-soft: #ECFDF5;
  --success-soft-strong: #047857;
  --error-soft: #FEF2F2;
  --error-soft-strong: #B91C1C;
  --warning-soft: #FFF7ED;
  --warning-soft-strong: #B45309;

  /* Semantic */
  --success: #22C55E;
  --warning: #F5A524;
  --error: #EF4444;
  --info: #16C7FC;

  /* Signature gradient */
  --gradient-brand: linear-gradient(90deg, #0A84F1 0%, #16C7FC 100%);

  /* Shared component aliases */
  --brand-primary: var(--color-primary);
  --border: var(--gray-200);
  --surface-muted: var(--gray-100);
  --text-muted: var(--slate);
  --shadow-sm: 0 1px 2px rgba(15, 31, 53, 0.06), 0 8px 24px rgba(15, 31, 53, 0.05);
  --shadow-md: 0 16px 42px rgba(15, 31, 53, 0.10);

  /* Layout */
  --sidebar-width-expanded: 244px;
  --sidebar-width-collapsed: 72px;
  --header-height: 66px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --surface-light: #101B2E;
  --surface-card: rgba(16, 27, 46, 0.96);
  --surface-hover: #16243A;
  --surface-tinted: #102A47;
  --gray-50: #07101F;
  --gray-100: #142136;
  --gray-200: #22324B;
  --gray-300: #344761;
  --slate: #A1B1C7;
  --ink: #DCE7F5;
  --ink-strong: #F4F8FD;
  --page-background: #07101F;
  --header-background: rgba(8, 18, 34, 0.90);
  --content-background-top: #0B1628;
  --info-soft: #0C2940;
  --info-soft-strong: #7DD3FC;
  --success-soft: #0B2E25;
  --success-soft-strong: #6EE7B7;
  --error-soft: #35171D;
  --error-soft-strong: #FCA5A5;
  --warning-soft: #3A2A0F;
  --warning-soft-strong: #FBBF6C;
  --border: var(--gray-200);
  --surface-muted: var(--gray-100);
  --text-muted: var(--slate);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20), 0 10px 28px rgba(0, 0, 0, 0.24);
  --shadow-md: 0 18px 48px rgba(0, 0, 0, 0.36);
}