/* ==========================================================================
   Design Tokens
   Brand colors and typography are fixed — everything else derives from them.
   ========================================================================== */
:root {
  /* --- Brand palette (unchanged) --- */
  --color-primary-dark: #243a51;
  --color-secondary-dark: #3a4a5c;
  --color-primary-green: #5dcfa2;

  --color-primary-pink: #f6576c;

  --color-danger: #f5455c;
  --color-danger-light: #f6576c;

  --color-success: #10b981;
  --color-success-dark: #059669;

  --color-warning: #f59e0b;
  --color-warning-dark: #92400e;

  --color-yellow-100: #fcfce5;

  /* --- Brand tints (alpha variants of the palette above) --- */
  --tint-navy-04: rgba(36, 58, 81, 0.04);
  --tint-navy-06: rgba(36, 58, 81, 0.06);
  --tint-navy-10: rgba(36, 58, 81, 0.1);
  --tint-navy-16: rgba(36, 58, 81, 0.16);
  --tint-green-10: rgba(93, 207, 162, 0.1);
  --tint-green-16: rgba(93, 207, 162, 0.16);
  --tint-green-28: rgba(93, 207, 162, 0.28);
  --tint-danger-10: rgba(245, 69, 92, 0.1);
  --tint-danger-16: rgba(245, 69, 92, 0.16);
  --tint-white-10: rgba(255, 255, 255, 0.1);
  --tint-white-16: rgba(255, 255, 255, 0.16);
  --tint-white-24: rgba(255, 255, 255, 0.24);
  /* Enough white to lift a control off the canvas without reading as a surface.
     Used by an inactive tab on hover (see components/app_tabs). */
  --tint-white-60: rgba(255, 255, 255, 0.6);

  /* The side rail keeps its own palette, because it has two of them — green and
     navy — and a theme is easier to read as one block of overrides next to the
     rules that use it. See components/sidenav. */

  /* --- Neutrals --- */
  --color-white: #ffffff;
  --color-canvas: #f4f6f9;
  --color-surface: #ffffff;
  --color-surface-sunken: #f8fafc;
  --color-border: #e3e9f0;
  --color-border-strong: #cbd5e1;
  --color-text: #1f2937;
  --color-text-muted: #64748b;
  --color-text-faint: #94a3b8;

  /* Legacy aliases still referenced by older sheets */
  --color-background-secondary: var(--color-surface-sunken);
  --color-gray-700: #374151;

  /* --- Typography (unchanged) --- */
  --font-family-base: "Quicksand";
  --font-family-bold: "Quicksand";

  --font-size-small: 12px;
  --font-size-medium: 14px;
  --font-size-large: 16px;
  --font-size-xlarge: 18px;
  --font-size-xxlarge: 24px;
  --font-size-xxxlarge: 30px;

  /* Legacy aliases */
  --font-size-sm: var(--font-size-small);
  --font-size-base: var(--font-size-medium);
  --font-weight-medium: 500;

  /* Micro-label: uppercase eyebrow used on table headers, form labels, etc. */
  --label-letter-spacing: 0.06em;

  /* --- Spacing scale --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* --- Radii --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* Legacy alias */
  --border-radius-lg: var(--radius-lg);

  /* --- Elevation --- */
  --shadow-xs: 0 1px 2px rgba(15, 30, 45, 0.06);
  --shadow-sm: 0 1px 3px rgba(15, 30, 45, 0.08), 0 1px 2px rgba(15, 30, 45, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 30, 45, 0.08), 0 2px 4px rgba(15, 30, 45, 0.05);
  --shadow-lg: 0 12px 32px rgba(15, 30, 45, 0.14), 0 4px 8px rgba(15, 30, 45, 0.06);
  --shadow-glow-green: 0 0 0 3px var(--tint-green-16);

  /* --- Focus ring --- */
  --focus-ring: 0 0 0 3px var(--tint-green-28);
  --focus-ring-danger: 0 0 0 3px var(--tint-danger-16);

  /* --- Motion --- */
  --transition-fast: 0.15s ease;
  --transition-base: 0.2s ease;
  --transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Layout dimensions --- */
  --topbar-height: 64px;
  /* The row of open pages, across the top of the main content area. Deep enough
     for a 12px label and a close control, and no deeper: it is taken off the
     height of every page in the application. See components/app_tabs. */
  --app-tabs-height: 38px;
  --sidenav-width-collapsed: 64px;
  --sidenav-width-expanded: 240px;
  /* The rail's inner gutter and row height. Collapsed, a row is a square:
     64 - (2 * 12) = 40, so the icon inside it lands on the rail's centre line
     and does not move when the rail widens. */
  --sidenav-gutter: var(--space-3);
  --sidenav-row-height: 40px;

  /* --- Z-index scale --- */
  --z-sticky: 10;
  /* The cookie banner: above the page it sits over, and below everything the
     user might be doing on top of it. A passive notice that outranked a drawer
     would swallow the clicks meant for the drawer's buttons. */
  --z-cookie-notice: 50;
  --z-sidenav: 100;
  --z-topbar: 1000;
  --z-drawer: 1002;
  --z-modal: 1100;
}