/**
 * AWA UI Design Tokens
 * CSS custom properties for light and dark modes.
 */

:root,
[data-theme='light'] {
  color-scheme: light;

  --color-canvas: #f5f7fa;
  --color-surface: #ffffff;
  --color-surface-raised: #ffffff;
  --color-surface-sunken: #eef1f6;
  --color-ink: #111118;
  --color-text-primary: #111118;
  --color-text-secondary: #5c5c66;
  --color-text-muted: #8a8a96;
  --color-text-inverse: #f8fafc;
  --color-border: #e6e6ea;
  --color-border-strong: #d0d0d6;
  --color-border-subtle: #f0f0f3;

  /* Black-weighted default accent — chrome feel, open surfaces stay light */
  --color-primary: #1d1d26;
  --color-primary-hover: #2a2a36;
  --color-primary-active: #111118;
  --color-primary-soft: #f0f0f3;
  --color-primary-foreground: #ffffff;

  --color-secondary: #3d8b7a;
  --color-secondary-hover: #327566;
  --color-secondary-soft: #e8f5f2;
  --color-secondary-foreground: #ffffff;

  --color-success: #16a34a;
  --color-success-soft: #e8f8ee;
  --color-warning: #d97706;
  --color-warning-soft: #fef3e2;
  --color-danger: #dc2626;
  --color-danger-soft: #feecec;
  --color-info: #2563eb;
  --color-info-soft: #eff4ff;
  --color-neutral: #6b6b76;
  --color-neutral-soft: #f3f3f5;

  --color-focus-ring: rgba(29, 29, 38, 0.22);
  --color-overlay: rgba(17, 17, 24, 0.45);
  --color-shadow: rgba(17, 17, 24, 0.07);
  --color-switch-on: #0a84ff;
  --color-switch-off: #e5e5ea;

  --font-sans: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;

  --text-display: 2.75rem;
  --text-h1: 2.25rem;
  --text-h2: 1.875rem;
  --text-h3: 1.5rem;
  --text-h4: 1.25rem;
  --text-h5: 1.125rem;
  --text-h6: 1rem;
  --text-subtitle: 1.125rem;
  --text-body-lg: 1.0625rem;
  --text-body: 0.9375rem;
  --text-body-sm: 0.8125rem;
  --text-caption: 0.75rem;
  --text-label: 0.8125rem;
  --text-code: 0.8125rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-full: 9999px;
  --radius-control: var(--radius-md);
  --radius-button: var(--radius-full);

  --shadow-xs: 0 1px 2px var(--color-shadow);
  --shadow-sm: 0 1px 3px var(--color-shadow), 0 1px 2px rgba(26, 35, 50, 0.04);
  --shadow-md: 0 4px 12px var(--color-shadow), 0 2px 4px rgba(26, 35, 50, 0.04);
  --shadow-lg: 0 12px 32px var(--color-shadow), 0 4px 8px rgba(26, 35, 50, 0.06);
  --shadow-xl: 0 24px 48px var(--color-shadow);
  --shadow-button: 0 2px 8px rgba(15, 23, 42, 0.12), 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);
  --shadow-field-hover: 0 0 0 1px var(--color-focus-ring), 0 0 14px var(--color-focus-ring);
  --shadow-field-focus: 0 0 0 1px var(--color-focus-ring), 0 0 20px var(--color-focus-ring);

  --z-dropdown: 1000;
  --z-sticky: 1100;
  --z-overlay: 1200;
  --z-modal: 1300;
  --z-popover: 1400;
  --z-toast: 1500;
  --z-tooltip: 1600;
  --z-command: 1700;

  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 220ms;
  --easing-standard: cubic-bezier(0.22, 1, 0.36, 1);

  --control-h-sm: 2rem;
  --control-h-md: 2.5rem;
  --control-h-lg: 2.75rem;

  --icon-xs: 0.875rem;
  --icon-sm: 1rem;
  --icon-md: 1.125rem;
  --icon-lg: 1.25rem;
  --icon-xl: 1.5rem;
  --icon-2xl: 2rem;

  --sidebar-width: 16.25rem;
  --sidebar-width-collapsed: 4.5rem;
  --header-height: 70px;
  --shell-inset: 1rem;
  --content-gap: 1rem;
  --content-max-width: 87.5rem;

  /* Fixed Apple-style top bar (always dark) */
  --color-header-bar: #0f0f14;
  --color-header-bar-border: rgba(255, 255, 255, 0.08);
  --color-header-bar-text: rgba(255, 255, 255, 0.92);
  --color-header-bar-muted: rgba(255, 255, 255, 0.55);
  --color-header-bar-hover: rgba(255, 255, 255, 0.1);
  --color-header-bar-soft: rgba(255, 255, 255, 0.12);

  --density-gap: 1rem;
  --density-pad: 1rem;
}

[data-theme='dark'] {
  color-scheme: dark;

  --color-canvas: #12151c;
  --color-surface: #1a1e28;
  --color-surface-raised: #222733;
  --color-surface-sunken: #0e1117;
  --color-ink: #e8edf5;
  --color-text-primary: #e8edf5;
  --color-text-secondary: #9aa8ba;
  --color-text-muted: #6b7a8d;
  --color-text-inverse: #12151c;
  --color-border: #2c3342;
  --color-border-strong: #3d4658;
  --color-border-subtle: #232937;

  --color-primary: #7b7ff5;
  --color-primary-hover: #8e91f7;
  --color-primary-active: #6a6ee8;
  --color-primary-soft: #252a4a;
  --color-primary-foreground: #ffffff;

  --color-secondary: #2dd4bf;
  --color-secondary-hover: #5eead4;
  --color-secondary-soft: #16332f;
  --color-secondary-foreground: #042f2e;

  --color-success: #22c55e;
  --color-success-soft: #14301f;
  --color-warning: #f59e0b;
  --color-warning-soft: #33250f;
  --color-danger: #f87171;
  --color-danger-soft: #331a1a;
  --color-info: #38bdf8;
  --color-info-soft: #0f2838;
  --color-neutral: #94a3b8;
  --color-neutral-soft: #1e2430;

  --color-focus-ring: rgba(123, 127, 245, 0.45);
  --color-overlay: rgba(0, 0, 0, 0.55);
  --color-shadow: rgba(0, 0, 0, 0.35);
  --color-switch-on: #0a84ff;
  --color-switch-off: #39393d;
}

[data-density='compact'] {
  --control-h-sm: 1.75rem;
  --control-h-md: 2rem;
  --control-h-lg: 2.25rem;
  --density-gap: 0.75rem;
  --density-pad: 0.75rem;
}

[data-density='comfortable'] {
  --control-h-sm: 2.25rem;
  --control-h-md: 2.75rem;
  --control-h-lg: 3rem;
  --density-gap: 1.25rem;
  --density-pad: 1.25rem;
}

[data-radius='sharp'] {
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-control: 0.375rem;
}

[data-radius='rounded'] {
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-2xl: 1.5rem;
  --radius-control: 0.75rem;
}

[data-reduced-motion='true'] *,
[data-reduced-motion='true'] *::before,
[data-reduced-motion='true'] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* Keep layout stable when overlays lock body scroll (dropdown/modal) */
html {
  scrollbar-gutter: stable;
}