/* Vermulst Group — Luxury Industrial Theme */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Playfair+Display:wght@400;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root,
:root[data-theme="light"],
:root[data-theme="dark"] {
  /* === Typography === */
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* === Base surfaces === */
  --bg: #0A0A0A;
  --bg-content: #121212;
  --bg-elevated: #1C1C1C;
  --bg-muted: #151617;
  --bg-hover: #202224;
  --bg-accent: rgba(91, 155, 213, 0.08);
  --bg-secondary: #161718;

  /* === Cards & panels === */
  --card: #1E1E1E;
  --card-foreground: #F0F2F5;
  --card-highlight: rgba(91, 155, 213, 0.06);
  --panel: #181919;
  --panel-hover: #202224;
  --panel-strong: #242628;
  --popover: #1E1E1E;
  --popover-foreground: #F0F2F5;

  /* === Chrome (nav/sidebar) === */
  --chrome: #121212;
  --chrome-strong: #1E1E1E;

  /* === Text === */
  --text: #E2E6EC;
  --text-strong: #F0F2F5;
  --chat-text: #E2E6EC;
  --static: #E2E6EC;
  --text-muted: #9AA5B5;

  /* === Muted foreground === */
  --muted: #202224;
  --muted-foreground: #9AA5B5;
  --muted-strong: #ABB5C5;

  /* === Borders === */
  --border: #303640;
  --border-hover: #5B9BD5;
  --border-strong: #404850;
  --border-color: #303640;

  /* === Accent (ice blue) === */
  --accent: #5B9BD5;
  --accent-hover: #7CB3E8;
  --accent-muted: rgba(91, 155, 213, 0.28);
  --accent-subtle: rgba(91, 155, 213, 0.18);
  --accent-foreground: #0A0A0A;
  --accent-glow: rgba(91, 155, 213, 0.15);
  --accent-2: #4A89C3;
  --accent-2-muted: rgba(74, 137, 195, 0.25);
  --accent-2-subtle: rgba(74, 137, 195, 0.10);

  /* === Primary === */
  --primary: #5B9BD5;
  --primary-foreground: #0A0A0A;

  /* === Secondary === */
  --secondary: #202224;
  --secondary-foreground: #E2E6EC;

  /* === Semantic colors === */
  --ok: #22c55e;
  --ok-muted: rgba(34, 197, 94, 0.25);
  --ok-subtle: rgba(34, 197, 94, 0.16);
  --warn: #E5A836;
  --warn-muted: rgba(229, 168, 54, 0.25);
  --warn-subtle: rgba(229, 168, 54, 0.18);
  --danger: #C0392B;
  --danger-muted: rgba(192, 57, 43, 0.25);
  --danger-subtle: rgba(192, 57, 43, 0.16);
  --destructive: #C0392B;
  --destructive-foreground: #F0F2F5;
  --info: #5B9BD5;

  /* === Interactive === */
  --input: #161616;
  --clickable: #5B9BD5;
  --ring: rgba(91, 155, 213, 0.4);
  --focus: #5B9BD5;
  --focus-ring: rgba(91, 155, 213, 0.35);
  --focus-glow: 0 0 0 3px rgba(91, 155, 213, 0.15);
  --icon: #9AA5B5;

  /* === Grid === */
  --grid-line: #303640;

  /* === Radii (sharper for industrial feel) === */
  --radius: 6px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
  --shadow-glow: 0 0 20px rgba(91, 155, 213, 0.08);

  /* === Timing === */
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --duration-slow: 350ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Shell layout === */
  --shell-gap: 0px;
  --shell-pad: 16px;
  --shell-nav-width: 240px;
  --shell-topbar-height: 48px;
  --shell-focus-duration: 200ms;
  --shell-focus-ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* === Theme switcher (keep defaults) === */
  --theme-pad: 3px;
  --theme-gap: 2px;
  --theme-item: 28px;
  --theme-switch-x: 0px;
  --theme-switch-y: 0px;

  color-scheme: dark;
}

/* === Document-level styles === */
body {
  background: #0A0A0A;
  color: #E2E6EC;
  font-family: 'DM Sans', system-ui, sans-serif;
}

/* Subtle grain overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #0A0A0A;
}
::-webkit-scrollbar-thumb {
  background: #303640;
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: #404850;
}

/* Selection highlight */
::selection {
  background: rgba(91, 155, 213, 0.25);
  color: #F0F2F5;
}