/**
 * Sand & Sea — Design tokens (Milestone 0B Task 2)
 * Authority: docs/design/VISUAL_AUDIT_0B.md + UI_UX_DIRECTION_FREEZE.md
 * Brand preserved: ocean navy · teal · sand. Execution elevated for premium ERP SaaS.
 */
:root {
  /* ---- Typography ---- */
  --ss-font-brand: "Fraunces", Georgia, "Times New Roman", serif;
  --ss-font-ui: "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
  --ss-font-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;

  --ss-text-display: 32px;
  --ss-text-page-title: 28px;
  --ss-text-section: 18px;
  --ss-text-body: 14px;
  --ss-text-label: 13px;
  --ss-text-meta: 12px;
  --ss-text-kpi: 30px;
  --ss-leading-tight: 1.2;
  --ss-leading-snug: 1.35;
  --ss-leading-body: 1.5;

  /* ---- Brand / primary ---- */
  --ss-primary-950: #0b1f33;
  --ss-primary-900: #0f2a44;
  --ss-primary-800: #153a5c;
  --ss-primary-700: #1b4b73;
  --ss-primary-600: #216399;
  --ss-primary-500: #2b7bb8;
  --ss-primary-400: #4e96cc;
  --ss-primary-300: #7fb3db;
  --ss-primary-200: #b3d2eb;
  --ss-primary-100: #d9eaf6;
  --ss-primary-50: #eef6fb;

  /* Secondary (teal) */
  --ss-secondary-900: #1f3a3a;
  --ss-secondary-700: #2f6f6a;
  --ss-secondary-500: #3d9b93;
  --ss-secondary-300: #8fcdc7;
  --ss-secondary-100: #e4f4f2;
  --ss-secondary-50: #f2faf9;

  /* Accent (sand) — sparingly */
  --ss-accent-600: #c4a35a;
  --ss-accent-500: #d4b56a;
  --ss-accent-100: #f7f0dd;

  --ss-badge-border-success: #c6eed5;
  --ss-badge-border-warning: #ffe2a8;
  --ss-badge-border-danger: #fecdca;
  --ss-badge-border-info: #b9e6fe;

  /* Semantic */
  --ss-success-700: #0f7a45;
  --ss-success-500: #1b9e5a;
  --ss-success-100: #e5f7ec;
  --ss-warning-700: #9a6b00;
  --ss-warning-500: #d99000;
  --ss-warning-100: #fff3d6;
  --ss-danger-700: #b42318;
  --ss-danger-600: #c0392b;
  --ss-danger-500: #d92d20;
  --ss-danger-100: #fee4e2;
  --ss-info-700: #175cd3;
  --ss-info-500: #2e90fa;
  --ss-info-100: #e0f2fe;

  /* ---- Surfaces (light) — subtle hierarchy ---- */
  --ss-bg-app: #eef2f7;
  --ss-bg-surface: #ffffff;
  --ss-bg-surface-muted: #f4f7fb;
  --ss-bg-muted: var(--ss-bg-surface-muted);
  --ss-bg-surface-raised: #ffffff;
  --ss-bg-tint-primary: var(--ss-primary-50);
  --ss-bg-tint-warning: var(--ss-warning-100);
  --ss-bg-tint-danger: var(--ss-danger-100);
  --ss-bg-tint-success: var(--ss-success-100);
  --ss-bg-tint-info: var(--ss-info-100);
  --ss-bg-table-header: #f1f5fa;
  --ss-bg-toolbar: #f7f9fc;
  --ss-border-default: #d5dde8;
  --ss-border-strong: #a8b3c5;
  --ss-border-subtle: #e4eaf2;
  --ss-border-focus: #216399;
  --ss-hover-row: #eef6fb;
  --ss-hover-surface: #eef2f7;
  --ss-text-primary: #0f172a;
  --ss-text-secondary: #475569;
  --ss-text-muted: #64748b;
  --ss-text-link: #1b4b73;
  --ss-overlay: rgba(15, 23, 42, 0.48);
  --ss-focus-ring: rgba(33, 99, 153, 0.22);

  /* Delta / trend */
  --ss-delta-up: var(--ss-success-700);
  --ss-delta-down: var(--ss-danger-700);
  --ss-delta-flat: var(--ss-text-muted);

  /* ---- Sidebar / chrome ---- */
  --ss-sidebar-bg: #0c243c;
  --ss-sidebar-border: #153a5c;
  --ss-sidebar-text: #d9eaf6;
  --ss-sidebar-text-muted: #9ec4e0;
  --ss-sidebar-hover: #153a5c;
  --ss-sidebar-active: #1b4b73;
  --ss-sidebar-width: 248px;
  --ss-sidebar-collapsed: 68px;
  --ss-header-height: 60px;
  --ss-shell-height: 100dvh;
  --ss-content-gutter: var(--ss-space-6);
  --ss-content-gutter-sm: var(--ss-space-4);

  /* ---- Workspace rhythm (0B2) ---- */
  --ss-page-gap: var(--ss-space-5);
  --ss-section-gap: var(--ss-space-6);
  --ss-card-gap: var(--ss-space-4);
  --ss-stack-gap: var(--ss-space-4);

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

  /* ---- Radius ---- */
  --ss-radius-sm: 6px;
  --ss-radius-md: 10px;
  --ss-radius-lg: 14px;
  --ss-radius-xl: 18px;

  /* ---- Elevation (subtle, tokenized) ---- */
  --ss-shadow-xs: 0 1px 2px rgba(15, 42, 68, 0.04);
  --ss-shadow-sm: 0 1px 3px rgba(15, 42, 68, 0.06), 0 1px 2px rgba(15, 42, 68, 0.04);
  --ss-shadow-md: 0 4px 12px rgba(15, 42, 68, 0.08), 0 2px 4px rgba(15, 42, 68, 0.04);
  --ss-shadow-lg: 0 12px 32px rgba(15, 42, 68, 0.12), 0 4px 8px rgba(15, 42, 68, 0.06);
  --ss-shadow-header: 0 1px 0 rgba(15, 42, 68, 0.04);

  /* ---- Density ---- */
  --ss-table-pad-y: 10px;
  --ss-table-pad-x: 14px;
  --ss-table-pad-y-compact: 7px;
  --ss-table-pad-x-compact: 10px;
  --ss-control-height: 36px;
  --ss-control-height-sm: 30px;
  --ss-field-gap: var(--ss-space-4);

  /* ---- Motion ---- */
  --ss-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ss-fast: 150ms;
  --ss-medium: 220ms;

  /* ---- Bootstrap bridge ---- */
  --bs-primary: var(--ss-primary-700);
  --bs-primary-rgb: 27, 75, 115;
  --bs-success: var(--ss-success-500);
  --bs-warning: var(--ss-warning-500);
  --bs-danger: var(--ss-danger-500);
  --bs-info: var(--ss-info-500);
  --bs-body-font-family: var(--ss-font-ui);
  --bs-body-color: var(--ss-text-primary);
  --bs-body-bg: var(--ss-bg-app);
  --bs-border-color: var(--ss-border-default);
  --bs-link-color: var(--ss-text-link);
  --bs-border-radius: var(--ss-radius-md);
  --bs-box-shadow-sm: var(--ss-shadow-sm);
  --bs-box-shadow: var(--ss-shadow-md);
}

[data-bs-theme="dark"] {
  --ss-bg-app: #0b1220;
  --ss-bg-surface: #121a2a;
  --ss-bg-surface-muted: #1a2438;
  --ss-bg-muted: var(--ss-bg-surface-muted);
  --ss-bg-surface-raised: #162033;
  --ss-bg-table-header: #162033;
  --ss-bg-toolbar: #152033;
  --ss-bg-tint-primary: rgba(43, 123, 184, 0.18);
  --ss-bg-tint-warning: rgba(217, 144, 0, 0.16);
  --ss-bg-tint-danger: rgba(217, 45, 32, 0.16);
  --ss-bg-tint-success: rgba(27, 158, 90, 0.16);
  --ss-bg-tint-info: rgba(46, 144, 250, 0.16);
  --ss-primary-50: rgba(43, 123, 184, 0.14);
  --ss-primary-100: rgba(43, 123, 184, 0.22);
  --ss-primary-700: #7fb3db;
  --ss-primary-800: #a8cce8;
  --ss-primary-900: #d4e8f6;
  --ss-success-50: rgba(27, 158, 90, 0.12);
  --ss-success-100: rgba(27, 158, 90, 0.16);
  --ss-success-700: #6ee7a8;
  --ss-warning-50: rgba(217, 144, 0, 0.12);
  --ss-warning-100: rgba(217, 144, 0, 0.16);
  --ss-warning-700: #f0c674;
  --ss-danger-50: rgba(217, 45, 32, 0.12);
  --ss-danger-100: rgba(217, 45, 32, 0.16);
  --ss-danger-700: #f5a39a;
  --ss-info-50: rgba(46, 144, 250, 0.12);
  --ss-info-100: rgba(46, 144, 250, 0.16);
  --ss-info-700: #8ec5ff;
  --ss-secondary-50: rgba(61, 155, 147, 0.12);
  --ss-secondary-100: rgba(61, 155, 147, 0.2);
  --ss-secondary-300: rgba(61, 155, 147, 0.35);
  --ss-secondary-700: #7dcdc5;
  --ss-secondary-900: #b8ebe4;
  --ss-accent-100: rgba(212, 181, 106, 0.16);
  --ss-accent-600: #e0c98a;
  --ss-sidebar-text: #d7e8f6;
  --ss-border-default: #2a3a52;
  --ss-border-strong: #3a4d6a;
  --ss-border-subtle: #1f2c42;
  --ss-border-focus: #4e96cc;
  --ss-hover-row: #1a2438;
  --ss-hover-surface: #1a2438;
  --ss-text-primary: #e8eef7;
  --ss-text-secondary: #a7b4c8;
  --ss-text-muted: #8b9bb0;
  --ss-text-link: #7fb3db;
  --ss-sidebar-bg: #081929;
  --ss-sidebar-text-muted: #9ec4e0;
  --ss-sidebar-active: #216399;
  --ss-overlay: rgba(0, 0, 0, 0.6);
  --ss-focus-ring: rgba(78, 150, 204, 0.28);
  --ss-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.24);
  --ss-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.28);
  --ss-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.36);
  --ss-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
  --ss-auth-shell-bg: linear-gradient(180deg, #0b1220 0%, #121a2a 100%);
  --ss-badge-border-success: rgba(110, 231, 168, 0.35);
  --ss-badge-border-warning: rgba(240, 198, 116, 0.35);
  --ss-badge-border-danger: rgba(245, 163, 154, 0.35);
  --ss-badge-border-info: rgba(142, 197, 255, 0.35);
  --bs-primary: var(--ss-primary-400);
  --bs-primary-rgb: 78, 150, 204;
  --bs-body-color: var(--ss-text-primary);
  --bs-body-bg: var(--ss-bg-app);
  --bs-border-color: var(--ss-border-default);
  --bs-link-color: var(--ss-text-link);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ss-fast: 0ms;
    --ss-medium: 0ms;
  }
  .ss-btn:active,
  .ss-content-enter,
  .ss-progress-bar-fill {
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}