/**
 * Oparo Foundations — design tokens v1
 * Source of truth: ohub/documentation/oparo-foundations.md
 * Hardcoded visual values in components are prohibited; use these tokens.
 */

:root {
  /* Spacing (4px scale) */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radius */
  --radius-none: 0px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.06);
  --shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.06);
  --shadow-md: 0 4px 8px -2px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.06);
  --shadow-lg: 0 12px 24px -4px rgb(15 23 42 / 0.12), 0 4px 8px -4px rgb(15 23 42 / 0.08);

  /* Z-index layers */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-tooltip: 700;

  /* Typography — Oparo brand kit */
  --font-family-sans: Montserrat, Arial, sans-serif;
  --font-family-heading: 'ADA Hybrid', Montserrat, Arial, sans-serif;
  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-base: var(--font-size-md);
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 30px;
  --font-size-4xl: 36px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* Motion */
  --motion-fast: 120ms;
  --motion-normal: 180ms;
  --motion-slow: 260ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1.2);
  --ease-decelerated: cubic-bezier(0, 0, 0, 1);

  /* Layout */
  --layout-max-width: 1280px;
  --layout-content-max-width: 1280px;
  --layout-sidebar-expanded: 280px;
  --layout-sidebar-collapsed: 72px;
  --layout-sidebar-width: var(--layout-sidebar-expanded);
  --layout-topbar-height: 64px;
  --layout-panel-width: 420px;
  --layout-modal-max-width: 640px;

  /* Breakpoints (reference values — use in JS via responsive/breakpoints.ts) */
  --breakpoint-xs: 360px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* Density */
  --density-comfortable-row-height: 52px;
  --density-comfortable-field-height: 44px;
  --density-comfortable-spacing: 16px;
  --density-compact-row-height: 40px;
  --density-compact-field-height: 36px;
  --density-compact-spacing: 12px;

  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-stroke-width: 2;

  /* Light theme (semantic) — default for data-theme="light" */
  --color-background: #f7f8fa;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-border: #e2e5eb;
  --color-border-subtle: rgb(15 23 42 / 0.08);
  --color-text: #111315;
  --color-text-muted: #5c6570;
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-primary-subtle: rgb(37 99 235 / 0.12);
  --color-success: #059669;
  --color-success-subtle: rgb(5 150 105 / 0.12);
  --color-success-text: #047857;
  --color-warning: #d97706;
  --color-warning-subtle: rgb(217 119 6 / 0.12);
  --color-warning-text: #b45309;
  --color-danger: #dc2626;
  --color-danger-text: #b91c1c;
  --color-danger-subtle: rgb(248 113 113 / 0.1);
  --color-info: #2563eb;
  --color-info-subtle: rgb(37 99 235 / 0.12);
  --color-info-text: #1d4ed8;
  --color-focus-ring: #2563eb;
  --color-link: #2563eb;
  --color-on-primary: #ffffff;
  --color-auth-gradient-start: #eef1f6;
  --color-auth-gradient-end: #f7f8fa;

  /* Secondary — light indigo wash */
  --color-secondary-subtle: rgb(99 102 241 / 0.08);

  /* Paro / AI — discreet violet (platform products stay blue) */
  --color-paro: #7c3aed;
  --color-paro-hover: #6d28d9;
  --color-paro-subtle: rgb(124 58 237 / 0.12);
  --color-on-paro: #ffffff;

  /* Legacy aliases — prefer --color-background, --color-primary in new CSS */
  --color-bg: var(--color-background);
  --color-accent: var(--color-primary);
  --color-accent-subtle: var(--color-primary-subtle);
  --color-accent-contrast: var(--color-on-primary);
}

[data-theme='dark'] {
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.24);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.28), 0 1px 2px -1px rgb(0 0 0 / 0.2);
  --shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.32), 0 2px 4px -2px rgb(0 0 0 / 0.24);
  --shadow-lg: 0 12px 24px -4px rgb(0 0 0 / 0.36), 0 4px 8px -4px rgb(0 0 0 / 0.28);

  --color-background: #111315;
  --color-surface: #171a1f;
  --color-surface-elevated: #1c2028;
  --color-border: rgb(148 163 184 / 0.18);
  --color-border-subtle: rgb(148 163 184 / 0.12);
  --color-text: #e8edf5;
  --color-text-muted: #94a3b8;
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-primary-subtle: rgb(59 130 246 / 0.18);
  --color-success: #10b981;
  --color-success-subtle: rgb(16 185 129 / 0.18);
  --color-success-text: #6ee7b7;
  --color-warning: #f59e0b;
  --color-warning-subtle: rgb(245 158 11 / 0.18);
  --color-warning-text: #fcd34d;
  --color-danger: #f87171;
  --color-danger-text: #fca5a5;
  --color-danger-subtle: rgb(248 113 113 / 0.15);
  --color-info: #60a5fa;
  --color-info-subtle: rgb(96 165 250 / 0.18);
  --color-info-text: #93c5fd;
  --color-focus-ring: #60a5fa;
  --color-link: #93c5fd;
  --color-on-primary: #ffffff;
  --color-auth-gradient-start: #1e293b;
  --color-auth-gradient-end: #111315;

  --color-secondary-subtle: rgb(129 140 248 / 0.12);
  --color-paro: #8b5cf6;
  --color-paro-hover: #7c3aed;
  --color-paro-subtle: rgb(139 92 246 / 0.18);
  --color-on-paro: #ffffff;
}