:root {
  /* ============================================================
     ScopingTool design tokens — DARK (default theme)
     Light mode overrides these inside themes/light.css, scoped to
     .rest_of_body / overlays. Keep the teal brand accent intact.
     ============================================================ */

  /* === Brand / accent === */
  --color-accent: #0A5A6C;          /* brand teal — primary actions */
  --color-accent-hover: #75B4C9;    /* legacy light-teal hover (kept for back-compat) */
  --accent: #0A5A6C;
  --accent-strong: #0c6e84;         /* hover bg for primary buttons (subtle, not a huge jump) */
  --accent-pressed: #08475670;
  --accent-fg: #8fd3e3;             /* teal text/icon on dark surfaces (links, active states) */
  --accent-soft: rgba(10, 90, 108, 0.22);   /* soft fill for active nav / selected rows */
  --accent-soft-border: rgba(117, 180, 201, 0.35);

  /* === Surfaces === */
  --color-bg-main: #1F2125;         /* primary surface: cards / topbar (legacy name) */
  --color-bg-secondary: #131517;    /* app canvas behind cards (legacy name) */
  --color-bg-hover: #2A2E34;        /* row / control hover */
  --color-overlay: rgba(8, 10, 12, 0.62);

  --surface-canvas: #131517;        /* page background */
  --surface: #1F2125;               /* cards, panels, topbar */
  --surface-raised: #262A30;        /* popovers, dropdowns, cards-on-cards */
  --surface-hover: #2A2E34;
  --surface-sidebar: #16181B;       /* sidebar — slightly recessed from cards */
  --surface-inset: #15171A;         /* inputs / wells */

  /* === Text === */
  --color-text: #E6E9EF;            /* primary text */
  --color-text-muted: #8B92A0;      /* secondary / meta text */
  --color-text-faint: #646B78;      /* tertiary / placeholders */
  --color-text-error: #ff6b6b;
  --color-text-table-headers: #F2F4F7;
  --text-on-accent: #FFFFFF;

  /* === Icons === */
  --non-nav-icons: #599AAD;
  --nav-icons: #75B4C9;

  /* === Borders === */
  --color-border: #3A3F47;          /* legacy name — softened from harsh white */
  --color-border-muted: #4A5159;
  --color-border-darker: #2A2E34;
  --border-subtle: #24272D;         /* hairline dividers */
  --border-default: #313640;        /* default control / card borders */
  --border-strong: #454C56;
  --border-focus: var(--color-accent);

  /* === Status / feedback === */
  --color-danger: #e5484d;
  --color-danger-hover: #c4373c;
  --color-danger-soft: rgba(229, 72, 77, 0.16);
  --color-success: #46c46a;
  --color-success-soft: rgba(70, 196, 106, 0.16);
  --color-warning: #e6a23c;
  --color-warning-soft: rgba(230, 162, 60, 0.16);
  --color-info: #5aa9c4;
  --color-info-soft: rgba(90, 169, 196, 0.16);

  --toast-success-bg: #102a18;
  --toast-success-border: #2f7d49;
  --toast-success-text: #b9f5c9;
  --toast-error-bg: #2a1314;
  --toast-error-border: #9b3b3f;
  --toast-error-text: #ffc7c9;
  --toast-text-color: var(--color-text);

  --disabled-button: #2f343b;
  --disabled-button-text: #6b7280;

  /* === Spacing scale (8px grid) === */
  --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;

  /* legacy spacing names */
  --gap-small: 5%;
  --gap-default: 20px;
  --height-nav-item: 44px;

  /* === Radii === */
  --border-radius: 8px;             /* legacy name */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* === Typography === */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --font-family-material-icons: 'Material Symbols Outlined';

  --text-xs: 11px;
  --text-sm: 12px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;

  --leading-tight: 1.3;
  --leading-normal: 1.55;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;

  /* === Shadows (subtle — flat enterprise look) === */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.38);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.50);
  --shadow-focus: 0 0 0 3px rgba(10, 90, 108, 0.45);
  --modal-shadow: var(--shadow-lg);

  /* === Z-index scale === */
  --z-sticky: 50;
  --z-dropdown: 100;
  --z-sidebar: 200;
  --z-topbar: 150;
  --z-overlay: 1000;
  --z-modal: 1100;
  --z-palette: 1200;
  --z-toast: 1300;
  --z-tooltip: 1400;

  /* === Transitions === */
  --transition-fast: 0.15s ease;
  --transition-medium: 0.28s ease;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* === Layout === */
  --sidebar-width: 248px;
  --sidebar-width-collapsed: 64px;
  --topbar-height: 56px;

  /* === Modal (legacy names kept; sizing refined in modal.css) === */
  --modal-width: 540px;
  --modal-height: 80%;

  /* === Auth === */
  --auth-container-colour: #1A1C20;
}