/*
 DragonStar Design System V2
 Baseline: v0.7.3-module-notifications-candidate.14
 This file intentionally adds semantic design tokens and compatibility aliases.
 Load after site.css and before components/layout.
*/
:root {
  /* Spacing */
  --ds-space-0: 0;
  --ds-space-1: .25rem;
  --ds-space-2: .5rem;
  --ds-space-3: .75rem;
  --ds-space-4: 1rem;
  --ds-space-5: 1.25rem;
  --ds-space-6: 1.5rem;
  --ds-space-7: 2rem;
  --ds-space-8: 2.5rem;
  --ds-space-9: 3rem;
  --ds-space-10: 4rem;

  /* Typography */
  --ds-font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ds-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --ds-font-size-xs: .75rem;
  --ds-font-size-sm: .875rem;
  --ds-font-size-md: 1rem;
  --ds-font-size-lg: 1.125rem;
  --ds-font-size-xl: 1.375rem;
  --ds-font-size-2xl: clamp(1.8rem, 2.5vw, 2.5rem);
  --ds-font-size-3xl: clamp(2.25rem, 4vw, 3.4rem);
  --ds-line-height-tight: 1.15;
  --ds-line-height-normal: 1.5;
  --ds-line-height-relaxed: 1.65;

  /* Geometry */
  --ui-radius-xs: 6px;
  --ui-radius-sm: 9px;
  --ui-radius-md: 12px;
  --ui-radius-lg: 16px;
  --ui-radius-xl: 22px;
  --ui-radius-pill: 999px;
  --ui-control-height: 2.75rem;
  --ui-control-height-lg: 3rem;
  --ui-sidebar-width: 15.5rem;
  --ui-sidebar-collapsed-width: 4.5rem;
  --ui-topbar-height: 4.25rem;
  --ui-content-max: 120rem;

  /* Motion */
  --ui-motion-fast: 120ms;
  --ui-motion-normal: 180ms;
  --ui-motion-slow: 260ms;
  --ui-ease: cubic-bezier(.2,.8,.2,1);

  /* Base semantic values, overridden by themes-v2.css */
  --ui-bg: #f4f7fb;
  --ui-surface: #ffffff;
  --ui-surface-elevated: #ffffff;
  --ui-surface-muted: #eef3f8;
  --ui-surface-subtle: #f8fafc;
  --ui-border: #d8e0ea;
  --ui-border-strong: #bdc9d7;
  --ui-text: #1b2738;
  --ui-text-muted: #657386;
  --ui-heading: #0f1c2d;
  --ui-primary: #2f6f9f;
  --ui-primary-strong: #1f547e;
  --ui-primary-soft: #e6f1f9;
  --ui-accent: #e8b43f;
  --ui-success: #237a5a;
  --ui-warning: #9b641c;
  --ui-danger: #a53b3b;

  --ui-sidebar-bg: #102039;
  --ui-sidebar-text: #eef5ff;
  --ui-sidebar-muted: rgba(238,245,255,.64);
  --ui-sidebar-hover: rgba(255,255,255,.075);
  --ui-sidebar-active: rgba(99,174,226,.18);
  --ui-topbar-bg: color-mix(in srgb, var(--ui-surface) 92%, transparent);
  --ui-modal-bg: var(--ui-surface-elevated);
  --ui-backdrop: rgba(5, 12, 24, .68);
  --ui-backdrop-blur: 3px;

  --ui-shadow-xs: 0 1px 2px rgba(15, 28, 45, .05);
  --ui-shadow-sm: 0 4px 14px rgba(15, 28, 45, .07);
  --ui-shadow-card: 0 10px 30px rgba(15, 28, 45, .08);
  --ui-shadow-floating: 0 28px 90px rgba(6, 16, 30, .28);

  --ui-page-glow-a: rgba(52, 133, 196, .08);
  --ui-page-glow-b: rgba(98, 76, 190, .04);

  /* Compatibility aliases for legacy selectors that reference newer token names. */
  --ds-bg: var(--ui-bg);
  --ds-text: var(--ui-text);
  --ds-text-color: var(--ui-text);
  --ds-heading: var(--ui-heading);
  --ds-line-strong: var(--ui-border-strong);
  --ds-surface-muted: var(--ui-surface-muted);
  --ds-surface-strong: var(--ui-surface-elevated);
  --ds-border: var(--ui-border);
  --ds-border-color: var(--ui-border);

  /* Map legacy DragonStar variables to V2 semantic tokens. */
  --ds-ink: var(--ui-text);
  --ds-muted: var(--ui-text-muted);
  --ds-line: var(--ui-border);
  --ds-surface: var(--ui-surface);
  --ds-soft: var(--ui-bg);
  --ds-primary: var(--ui-primary);
  --ds-primary-strong: var(--ui-primary-strong);
  --ds-accent: var(--ui-accent);
  --ds-good: var(--ui-success);
  --ds-warn: var(--ui-warning);
  --ds-danger: var(--ui-danger);
  --ds-sidebar-bg: var(--ui-sidebar-bg);
  --ds-sidebar-ink: var(--ui-sidebar-text);
  --ds-sidebar-muted: var(--ui-sidebar-muted);
  --ds-sidebar-hover: var(--ui-sidebar-hover);
  --ds-sidebar-active: var(--ui-sidebar-active);
  --ds-control-height: var(--ui-control-height);
  --ds-control-radius: var(--ui-radius-sm);
  --topbar-height: var(--ui-topbar-height);

  --bs-body-color: var(--ui-text);
  --bs-body-bg: var(--ui-bg);
  --bs-secondary-color: var(--ui-text-muted);
  --bs-border-color: var(--ui-border);
  --bs-link-color: var(--ui-primary);
}

html {
  font-family: var(--ds-font-sans);
  background: var(--ui-bg);
}

body {
  color: var(--ui-text);
  background:
    radial-gradient(80rem 48rem at 92% -12rem, var(--ui-page-glow-a), transparent 62%),
    radial-gradient(55rem 38rem at 15% -20rem, var(--ui-page-glow-b), transparent 65%),
    var(--ui-bg);
  font-family: var(--ds-font-sans);
  line-height: var(--ds-line-height-normal);
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--ui-heading);
  letter-spacing: -.02em;
}

p {
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ui-motion-fast: 0ms;
    --ui-motion-normal: 0ms;
    --ui-motion-slow: 0ms;
  }
}