/**
 * Dusk Blue Theme Tokens & CSS Custom Properties
 * 2026 Visual Design Guideline
 */

:root {
  /* Color System */
  --color-primary-accent: #3d5a80;
  --color-primary-hover: #2b3f5c;
  --color-secondary-accent: #98c1d9;
  --color-secondary-hover: #7eaec9;
  --color-success: #8acb88;
  --color-success-bg: rgba(138, 203, 136, 0.15);
  --color-destructive: #ee6c4d;
  --color-destructive-bg: rgba(238, 108, 77, 0.15);
  --color-highlight: #ede7b1;
  --color-highlight-bg: rgba(237, 231, 177, 0.25);
  
  --color-bg-base: #f5f5f7;
  --color-bg-surface: #ffffff;
  --color-text-primary: #1a1a1a;
  --color-text-muted: #666666;
  --color-border: #e5e7eb;
  --color-border-hover: #cbd5e1;
  --color-overlay-bg: rgba(26, 26, 26, 0.5);
  --color-neutral-shaded: rgba(26, 26, 26, 0.05);

  /* Geometry & Sizing */
  --border-radius-sm: 4px;
  --border-radius-md: 6px;
  --grid-gap-base: 20px;
  --interactive-height: 44px;
  --max-content-width: 960px;
  --header-height: 60px;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, monospace;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-base);
}

::-webkit-scrollbar-thumb {
  background: var(--color-secondary-accent);
  border-radius: var(--border-radius-sm);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-accent);
}