/* =====================================================================
   Design Tokens — unified
   Namespace: --ds-* (core), --nav-* (navigation)
   ===================================================================== */

:root {
  /* -------------------------------------------------
   * Color Scheme
   * ------------------------------------------------- */
  color-scheme: light;

  /* -------------------------------------------------
   * Core Colors (Light)
   * ------------------------------------------------- */
  /* Accent */
  --ds-color-accent: rgb(13, 86, 150);                 /* primary brand */
  --ds-color-accent-secondary: rgb(13, 86, 150);       /* kept for compatibility */
  --ds-color-accent-hover: rgb(37, 99, 235);           /* from navigation tokens */
  --ds-color-accent-weak: rgba(59, 130, 246, 0.10);    /* subtle accent bg */

  /* Accent - RGB variants for rgba() usage */
  --ds-color-accent-rgb: 13, 86, 150;

  /* Text */
  --ds-color-text: rgb(12, 26, 61);                    /* body text */
  --ds-color-text-strong: rgb(17, 24, 28);             /* alias of neutral-strong from file #1 */
  --ds-color-text-link: rgb(13, 86, 150);
  --ds-color-text-weak: rgb(54, 67, 74);
  --ds-color-text-weaker: rgb(102, 118, 128);
  --ds-color-text-weakest: rgb(178, 186, 191);
  --ds-color-text-on-accent: rgb(255, 255, 255);
  --ds-color-text-error: rgb(210, 64, 35);
  --ds-color-text-danger: rgb(178, 48, 21);
  --ds-color-text-success: rgb(17, 118, 39);
  --ds-color-text-neutral: rgb(85, 89, 93);
  --ds-color-text-warning: rgb(148, 105, 0);
  --ds-color-text-warning-strong: rgb(51, 40, 16);
  --ds-color-text-highlight: rgb(121, 58, 175);
  --ds-color-text-info: rgb(52, 81, 178);
  --ds-color-text-progress: rgb(1, 109, 131);

  /* Surfaces & Backgrounds */
  --ds-color-background: rgb(250, 251, 251);
  --ds-color-surface: rgb(255, 255, 255);
  --ds-color-surface-raised: rgb(250, 251, 251);
  --ds-color-surface-lowered: rgb(230, 232, 235);
  --ds-color-surface-hover: rgb(241, 245, 249);        /* from navigation tokens */
  --ds-color-overlay: rgba(144, 152, 152, 0.4);

  /* Borders */
  --ds-color-border: rgb(216, 222, 228);
  --ds-color-border-strong: rgb(188, 197, 204);
  --ds-color-border-hover: rgb(102, 118, 128);
  --ds-color-border-neutral: rgb(215, 220, 224);
  --ds-color-border-warning: rgb(248, 216, 124);
  --ds-color-border-highlight: rgb(227, 204, 244);
  --ds-color-border-danger: rgb(250, 199, 190);
  --ds-color-border-success: rgb(183, 223, 186);
  --ds-color-border-info: rgb(198, 212, 249);
  --ds-color-border-progress: rgb(176, 229, 238);

  /* Status (solid) */
  --ds-color-status-primary: var(--ds-color-accent);
  --ds-color-status-neutral: rgb(255, 255, 255);
  --ds-color-status-warning: rgb(246, 205, 90);
  --ds-color-status-highlight: rgb(142, 78, 198);
  --ds-color-status-danger: rgb(210, 64, 35);
  --ds-color-status-success: rgb(29, 134, 51);
  --ds-color-status-info: rgb(62, 99, 221);
  --ds-color-status-progress: rgb(0, 127, 153);
  --ds-color-status-notification: rgb(231, 84, 54);
  --ds-color-status-dark: rgb(31, 41, 55);                /* gray-800 for dark variant */

  /* Status (weak bg) */
  --ds-color-status-neutral-weak: rgb(241, 243, 245);
  --ds-color-status-warning-weak: rgb(255, 250, 225);
  --ds-color-status-highlight-weak: rgb(249, 241, 254);
  --ds-color-status-danger-weak: rgb(255, 240, 238);
  --ds-color-status-success-weak: rgb(235, 249, 235);
  --ds-color-status-info-weak: rgb(240, 244, 255);
  --ds-color-status-progress-weak: rgb(231, 249, 251);

  /* Icons */
  --ds-color-icon: rgb(102, 118, 128);
  --ds-color-icon-hover: rgb(12, 26, 61);
  --ds-color-icon-weak: rgb(148, 163, 184);            /* from navigation tokens */

  /* Buttons / Active */
  --ds-color-button: rgb(255, 255, 255);
  --ds-color-button-hover: rgb(246, 248, 248);
  --ds-color-active: rgb(246, 248, 248);
  --ds-color-header: rgb(246, 248, 248);

  /* -------------------------------------------------
   * Typography
   * ------------------------------------------------- */
  --ds-font-family-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-font-family: var(--ds-font-family-sans); /* generic alias used in nav */
  --ds-font-family-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;

  --ds-font-size-xs: 0.75rem;     /* 12px */
  --ds-font-size-s: 0.875rem;     /* 14px */
  --ds-font-size-m: 1rem;         /* 16px */
  --ds-font-size-l: 1.125rem;     /* 18px */
  --ds-font-size-xl: 1.25rem;     /* 20px */
  --ds-font-size-xxl: 1.5rem;     /* 24px */
  --ds-font-size-xxxl: 2rem;      /* 32px */

  --ds-line-height-xs: 1.2;
  --ds-line-height-s: 1.3;
  --ds-line-height-m: 1.4;
  --ds-line-height-l: 1.5;
  --ds-line-height-xl: 1.6;

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

  /* -------------------------------------------------
   * Spacing
   * ------------------------------------------------- */
  --ds-space-xs: 0.25rem;  /* 4px */
  --ds-space-s: 0.5rem;    /* 8px */
  --ds-space-m: 1rem;      /* 16px */
  --ds-space-l: 1.5rem;    /* 24px */
  --ds-space-xl: 2rem;     /* 32px */
  --ds-space-xxl: 3rem;    /* 48px */
  --ds-space-xxxl: 4rem;   /* 64px */

  /* -------------------------------------------------
   * Radius
   * ------------------------------------------------- */
  --ds-radius-xs: 0.125rem; /* 2px */
  --ds-radius-s: 0.25rem;   /* 4px */
  --ds-radius-m: 0.375rem;  /* 6px */
  --ds-radius-l: 0.5rem;    /* 8px */
  --ds-radius-xl: 0.75rem;  /* 12px */
  --ds-radius-pill: 9999px;
  --ds-radius-circle: 50%;
  --ds-radius-full: var(--ds-radius-pill); /* alias for convenience */

  /* -------------------------------------------------
   * SVG Icon Stroke Width
   * ------------------------------------------------- */
  --ds-icon-stroke-width: 2;

  /* -------------------------------------------------
   * Shadows
   * ------------------------------------------------- */
  --ds-shadow-xs: 0 1px 2px rgba(12, 12, 12, 0.05);
  --ds-shadow-s: 0 1px 3px rgba(12, 12, 12, 0.09);
  --ds-shadow-m: 0 4px 12px rgba(12, 12, 12, 0.15);
  --ds-shadow-l: 0 8px 24px rgba(12, 12, 12, 0.15);
  --ds-shadow-xl: 0 24px 38px rgba(12, 12, 12, 0.16);

  /* Component Shadows */
  --ds-shadow-card: 0 0 0 1px var(--ds-color-border), 0 1px 5px rgba(12, 12, 12, 0.05), 0 0 40px rgba(12, 12, 12, 0.015);
  --ds-shadow-header: 0 1px 5px rgba(12, 12, 12, 0.05);
  --ds-shadow-modal: 0 24px 38px 3px rgba(12, 12, 12, 0.16), 0 9px 86px 8px rgba(12, 12, 12, 0.1), 0 11px 15px -7px rgba(12, 12, 12, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.05);
  --ds-shadow-popout: 0 4px 12px rgba(12, 12, 12, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
  --ds-shadow-tooltip: 0 4px 12px rgba(12, 12, 12, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05);
  --ds-shadow-nav: 0 0 0 1px var(--ds-color-border), 0 5px 17px rgba(12, 12, 12, 0.14);

  /* -------------------------------------------------
   * Motion
   * ------------------------------------------------- */
  --ds-duration-fast: 150ms;
  --ds-duration-normal: 250ms; /* kept original; nav used 300ms */
  --ds-duration-slow: 350ms;
  --ds-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ds-ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ds-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);

  /* -------------------------------------------------
   * Z-index (Core)
   * ------------------------------------------------- */
  --ds-z-dropdown: 1000;
  --ds-z-sticky: 1020;
  --ds-z-fixed: 1030;
  --ds-z-modal-backdrop: 1040;
  --ds-z-modal: 1050;
  --ds-z-popover: 1060;
  --ds-z-tooltip: 1070;
  --ds-z-toast: 1080;

  /* -------------------------------------------------
   * Focus
   * ------------------------------------------------- */
  --ds-focus-ring-width: 2px;
  --ds-focus-ring-offset: 2px;
  --ds-focus-ring-color: var(--ds-color-accent);
  --ds-focus-ring: 0 0 0 var(--ds-focus-ring-offset) var(--ds-color-surface),
                   0 0 0 calc(var(--ds-focus-ring-offset) + var(--ds-focus-ring-width)) var(--ds-focus-ring-color);

  /* =====================================================================
   * Navigation Tokens (map to ds-* wherever possible)
   * ===================================================================== */
  /* Dimensions */
  --nav-sidebar-width: 260px;
  --nav-sidebar-collapsed-width: 70px;
  --nav-sidebar-padding-x: var(--ds-space-m);
  --nav-sidebar-padding-y: var(--ds-space-s);
  --nav-sidebar-icon-size: 20px;
  --nav-sidebar-transition: width var(--ds-duration-normal) var(--ds-ease-out),
                             transform var(--ds-duration-normal) var(--ds-ease-out);

  /* Sidebar Brand Palette (explicit brand) */
  --nav-sidebar-bg: #0D5696;
  --nav-sidebar-bg-hover: #084174;
  --nav-sidebar-bg-active: #354472;
  --nav-sidebar-text: #ffffff;
  --nav-sidebar-text-hover: #d2eaff;
  --nav-sidebar-text-weak: #ffffff;
  --nav-sidebar-text-active: #ffffff;
  --nav-sidebar-border: #1b69ad;

  /* Internal panels */
  --nav-sidebar-internal-width: 280px;
  --nav-sidebar-internal-min-width: 200px;
  --nav-sidebar-internal-max-width: 480px;
  --nav-sidebar-internal-bg: var(--ds-color-surface);
  --nav-sidebar-internal-border: var(--ds-color-border);

  /* Right panel */
  --nav-sidebar-right-width: 320px;
  --nav-sidebar-right-min-width: 240px;
  --nav-sidebar-right-max-width: 480px;
  --nav-sidebar-right-bg: var(--ds-color-surface);
  --nav-sidebar-right-border: var(--ds-color-border);

  /* Topbar */
  --nav-topbar-height: 64px;
  --nav-topbar-bg: var(--ds-color-surface);
  --nav-topbar-border: var(--ds-color-border);
  --nav-topbar-shadow: var(--ds-shadow-s);

  /* Items */
  --nav-item-height: 40px;
  --nav-item-padding-x: var(--ds-space-m);
  --nav-item-padding-y: var(--ds-space-s);
  --nav-item-radius: var(--ds-radius-m);
  --nav-item-transition: all var(--ds-duration-fast) var(--ds-ease-out);

  /* Submenu / Tree */
  --nav-submenu-indent: var(--ds-space-l);
  --nav-submenu-bg: rgba(0, 0, 0, 0.15);
  --nav-submenu-item-height: 36px;

  --nav-tree-indent: calc(var(--ds-space-m) + 2px);
  --nav-tree-line-color: var(--ds-color-border);
  --nav-tree-item-height: 32px;

  /* Breakpoints */
  --nav-mobile-breakpoint: 768px;
  --nav-tablet-breakpoint: 1024px;
  --nav-desktop-breakpoint: 1280px;

  /* Tooltip / Flyout */
  --nav-tooltip-bg: rgba(15, 23, 42, 0.95);
  --nav-tooltip-text: #ffffff;
  --nav-tooltip-padding: var(--ds-space-s) var(--ds-space-m);
  --nav-tooltip-radius: var(--ds-radius-m);
  --nav-tooltip-shadow: var(--ds-shadow-m);

  --nav-flyout-bg: var(--nav-sidebar-bg);
  --nav-flyout-border: var(--nav-sidebar-border);
  --nav-flyout-shadow: var(--ds-shadow-xl);
  --nav-flyout-min-width: 200px;
  --nav-flyout-max-width: 320px;
  --nav-flyout-radius: var(--ds-radius-l);

  /* User dropdown */
  --nav-sidebar-user-height: 64px;
  --nav-sidebar-avatar-bg: rgba(255, 255, 255, 0.1);
  --nav-sidebar-text-secondary: rgba(255, 255, 255, 0.6);
  --nav-sidebar-hover-bg: rgba(255, 255, 255, 0.05);
  --nav-sidebar-dropdown-bg: var(--nav-sidebar-bg);
  --nav-sidebar-dropdown-border: var(--nav-sidebar-border);
  --nav-sidebar-dropdown-text: var(--nav-sidebar-text);
  --nav-sidebar-dropdown-hover-bg: rgba(255, 255, 255, 0.1);
  --nav-sidebar-dropdown-hover-text: var(--nav-sidebar-text-hover);
  --nav-sidebar-dropdown-icon: var(--nav-sidebar-text-secondary);
  --nav-sidebar-dropdown-hover-icon: var(--nav-sidebar-text-hover);

  /* Content widths */
  --nav-content-width-narrow: 960px;
  --nav-content-width-default: 1280px;
  --nav-content-width-wide: 1536px;
  --nav-content-width-full: 100%;

  /* Z-index (Nav) */
  --nav-z-overlay: 998;
  --nav-z-sidebar: 999;
  --nav-z-sidebar-internal: 997;
  --nav-z-sidebar-right: 996;
  --nav-z-topbar: 995;
  --nav-z-flyout: 1001;
  --nav-z-tooltip: 1002;
  --nav-z-modal: 1100;
}

/* =====================================================================
   Dark Theme
   ===================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  /* Base swap to navigation's dark palette while keeping full token set */
  --ds-color-text: rgb(226, 232, 240);
  --ds-color-text-strong: rgb(248, 250, 252);
  --ds-color-text-weak: rgb(148, 163, 184);
  --ds-color-text-weaker: rgb(100, 116, 139);

  --ds-color-background: rgb(15, 23, 42);
  --ds-color-surface: rgb(30, 41, 59);
  --ds-color-surface-raised: rgb(51, 65, 85);
  --ds-color-surface-lowered: rgb(51, 65, 85);
  --ds-color-surface-hover: rgb(71, 85, 105);

  --ds-color-border: rgb(51, 65, 85);
  --ds-color-border-strong: rgb(71, 85, 105);

  --ds-color-accent: rgb(96, 165, 250);
  --ds-color-accent-hover: rgb(147, 197, 253);
  --ds-color-accent-weak: rgba(96, 165, 250, 0.15);

  --ds-color-icon: rgb(148, 163, 184);
  --ds-color-icon-weak: rgb(100, 116, 139);

  /* Sidebar (dark) */
  --nav-sidebar-bg: rgb(15, 23, 42);
  --nav-sidebar-bg-hover: rgba(255, 255, 255, 0.05);
  --nav-sidebar-bg-active: rgba(96, 165, 250, 0.2);
  --nav-sidebar-border: rgba(255, 255, 255, 0.05);

  /* Panels */
  --nav-sidebar-internal-bg: rgb(30, 41, 59);
  --nav-sidebar-internal-border: rgb(51, 65, 85);
  --nav-sidebar-right-bg: rgb(30, 41, 59);
  --nav-sidebar-right-border: rgb(51, 65, 85);

  /* Topbar */
  --nav-topbar-bg: rgb(30, 41, 59);
  --nav-topbar-border: rgb(51, 65, 85);

  /* Flyout / Tooltip */
  --nav-flyout-bg: rgb(15, 23, 42);
  --nav-flyout-border: rgba(255, 255, 255, 0.1);
  --nav-tooltip-bg: rgba(0, 0, 0, 0.9);

  /* Stronger shadows in dark to preserve depth */
  --ds-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
  --ds-shadow-s: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
  --ds-shadow-m: 0 4px 6px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
  --ds-shadow-l: 0 10px 15px rgba(0, 0, 0, 0.3), 0 4px 6px rgba(0, 0, 0, 0.2);
  --ds-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4), 0 10px 10px rgba(0, 0, 0, 0.2);
}

/* =====================================================================
   Responsive Overrides
   ===================================================================== */
@media (max-width: 1024px) {
  :root {
    --nav-sidebar-width: 280px;
    --nav-sidebar-internal-width: 100%;
    --nav-sidebar-right-width: 100%;
  }
}
@media (max-width: 768px) {
  :root {
    --nav-topbar-height: 56px;
    --nav-sidebar-width: 85vw;
    --nav-sidebar-internal-width: 85vw;
    --nav-sidebar-right-width: 85vw;
  }
}

/* =====================================================================
   High Contrast
   ===================================================================== */
@media (prefers-contrast: high) {
  :root {
    --ds-color-border: rgb(0, 0, 0);
    --ds-color-border-strong: rgb(0, 0, 0);
    --nav-sidebar-border: rgb(255, 255, 255);
    --ds-focus-ring-width: 3px;
  }
  [data-theme="dark"] {
    --ds-color-border: rgb(255, 255, 255);
    --ds-color-border-strong: rgb(255, 255, 255);
    --nav-sidebar-border: rgb(255, 255, 255);
  }
}

/* =====================================================================
   Reduced Motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-duration-fast: 0.01ms;
    --ds-duration-normal: 0.01ms;
    --ds-duration-slow: 0.01ms;
  }
}