/* ===================================================================
   ROS-RUX3 P0 — Design System semantic tokens (Approved Design №1).
   ONE token layer for both themes: components read only these
   variables; light/dark differ ONLY in values under [data-theme].
   Light is the primary, default theme.
   =================================================================== */

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

  /* Surfaces */
  --ros-bg-app: #f4f6fb;
  --ros-bg-sidebar: #141b2d;
  --ros-bg-sidebar-elevated: #1c2439;
  --ros-surface-1: #ffffff;
  --ros-surface-2: #f7f8fc;
  --ros-surface-elevated: #ffffff;
  --ros-overlay: rgba(17, 24, 39, 0.45);
  --ros-skeleton: #e9edf5;

  /* Borders */
  --ros-border-subtle: #e6eaf2;
  --ros-border-strong: #cfd6e4;
  --ros-sidebar-border: rgba(255, 255, 255, 0.06);

  /* Text */
  --ros-text-primary: #111827;
  --ros-text-secondary: #4b5563;
  --ros-text-muted: #8a94a6;
  --ros-text-on-accent: #ffffff;
  --ros-sidebar-text: #c9cfdc;
  --ros-sidebar-text-muted: #8b94ab;
  --ros-sidebar-text-active: #ffffff;

  /* Accent & semantic */
  --ros-accent: #4f5bd5;
  --ros-accent-hover: #4350c8;
  --ros-accent-soft: #eceefc;
  --ros-sidebar-active: #3f4ac9;
  --ros-success: #22c55e;
  --ros-success-soft: #e8f8ee;
  --ros-warning: #f59e0b;
  --ros-warning-soft: #fef3e0;
  --ros-critical: #ef4444;
  --ros-critical-soft: #fdecec;
  --ros-info: #3b82f6;
  --ros-info-soft: #e8f0fe;
  --ros-purple: #8b5cf6;
  --ros-purple-soft: #f1ecfe;
  --ros-orange: #f97316;
  --ros-orange-soft: #fff0e6;

  /* Charts */
  --ros-chart-grid: #eef1f6;
  --ros-chart-axis: #8a94a6;
  --ros-chart-line: #4f5bd5;
  --ros-chart-area-top: rgba(79, 91, 213, 0.28);
  --ros-chart-area-bottom: rgba(79, 91, 213, 0);
  --ros-chart-tooltip-bg: #111827;
  --ros-chart-tooltip-text: #ffffff;
  --ros-chart-series-1: #4f5bd5;
  --ros-chart-series-2: #22c55e;
  --ros-chart-series-3: #f59e0b;
  --ros-chart-series-4: #ef4444;

  /* Focus & elevation */
  --ros-focus-ring: 0 0 0 3px rgba(79, 91, 213, 0.35);
  --ros-shadow-1: 0 1px 2px rgba(17, 24, 39, 0.04), 0 1px 8px rgba(17, 24, 39, 0.04);
  --ros-shadow-2: 0 4px 16px rgba(17, 24, 39, 0.08);
  --ros-shadow-3: 0 12px 32px rgba(17, 24, 39, 0.14);

  /* Geometry & type (theme-invariant, declared once) */
  --ros-radius-sm: 8px;
  --ros-radius-md: 12px;
  --ros-radius-lg: 16px;
  --ros-radius-pill: 999px;
  /* ROS-RUX3-P0-P1-V2 §9: wide enough that no Master IA label ("Склад и
     закупки") truncates; the collapsed width keeps the SAME outer/row
     padding as expanded (§6) so the icon column never moves. */
  --ros-sidebar-width: 288px;
  --ros-sidebar-width-collapsed: 84px;
  --ros-topbar-height: 72px;
  --ros-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ros-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --ros-text-xs: 0.75rem;
  --ros-text-sm: 0.8125rem;
  --ros-text-base: 0.9rem;
  --ros-text-md: 1rem;
  --ros-text-lg: 1.125rem;
  --ros-text-xl: 1.375rem;
  --ros-text-2xl: 1.75rem;
  --ros-text-kpi: 1.9rem;
  --ros-space-1: 4px;
  --ros-space-2: 8px;
  --ros-space-3: 12px;
  --ros-space-4: 16px;
  --ros-space-5: 20px;
  --ros-space-6: 24px;
  --ros-space-8: 32px;

  /* Motion (restrained; zeroed under reduced motion below) */
  --ros-motion-fast: 140ms;
  --ros-motion-base: 220ms;
  --ros-motion-slow: 480ms;
  --ros-ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* "On dark" set: for surfaces that are dark in BOTH themes (the
     sidebar rail and the Today hero banner, per Design №1). Declared
     once here so components never carry a raw colour. */
  --ros-on-dark-text: #ffffff;
  --ros-on-dark-text-strong: rgba(255, 255, 255, 0.85);
  --ros-on-dark-text-muted: rgba(255, 255, 255, 0.72);
  --ros-on-dark-text-faint: rgba(255, 255, 255, 0.55);
  --ros-on-dark-surface: rgba(255, 255, 255, 0.08);
  --ros-on-dark-surface-strong: rgba(255, 255, 255, 0.18);
  --ros-on-dark-border: rgba(255, 255, 255, 0.12);
  --ros-on-dark-success: #6ee7a6;
  --ros-on-dark-success-soft: rgba(34, 197, 94, 0.18);
  --ros-on-dark-warning: #fcd34d;
  --ros-on-dark-warning-soft: rgba(245, 158, 11, 0.2);
  --ros-hero-glow-1: rgba(79, 91, 213, 0.45);
  --ros-hero-glow-1-end: rgba(79, 91, 213, 0);
  --ros-hero-glow-2: rgba(139, 92, 246, 0.35);
  --ros-hero-glow-2-end: rgba(139, 92, 246, 0);

  /* ROS-RUX3-P0-P1-V3 §13: the brand SYMBOL colour is deliberately
     theme-invariant -- electric blue/cyan in both Light and Dark (the
     sidebar itself stays dark-navy in both, so the symbol never needs a
     separate light-theme variant). Declared once, never redefined under
     [data-theme="dark"]. */
  --ros-sphere-cyan: #38bdf8;
  --ros-sphere-blue: #4f5bd5;
  --ros-sphere-core: #60a5fa;
  --ros-sphere-glow: 0 0 8px rgba(56, 189, 248, 0.5);
}

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

  --ros-bg-app: #0f1524;
  --ros-bg-sidebar: #0b1020;
  --ros-bg-sidebar-elevated: #141b2d;
  --ros-surface-1: #171e30;
  --ros-surface-2: #1c2438;
  --ros-surface-elevated: #1e2740;
  --ros-overlay: rgba(0, 0, 0, 0.6);
  --ros-skeleton: #232c44;

  --ros-border-subtle: #262f47;
  --ros-border-strong: #364163;
  --ros-sidebar-border: rgba(255, 255, 255, 0.05);

  --ros-text-primary: #e8ecf5;
  --ros-text-secondary: #b3bccf;
  --ros-text-muted: #7f89a0;
  --ros-text-on-accent: #ffffff;
  --ros-sidebar-text: #b9c1d3;
  --ros-sidebar-text-muted: #7a8399;
  --ros-sidebar-text-active: #ffffff;

  --ros-accent: #6c7af0;
  --ros-accent-hover: #7f8cf5;
  --ros-accent-soft: rgba(108, 122, 240, 0.16);
  --ros-sidebar-active: #4652d1;
  --ros-success: #34d399;
  --ros-success-soft: rgba(52, 211, 153, 0.14);
  --ros-warning: #fbbf24;
  --ros-warning-soft: rgba(251, 191, 36, 0.14);
  --ros-critical: #f87171;
  --ros-critical-soft: rgba(248, 113, 113, 0.14);
  --ros-info: #60a5fa;
  --ros-info-soft: rgba(96, 165, 250, 0.14);
  --ros-purple: #a78bfa;
  --ros-purple-soft: rgba(167, 139, 250, 0.14);
  --ros-orange: #fb923c;
  --ros-orange-soft: rgba(251, 146, 60, 0.14);

  --ros-chart-grid: #232c44;
  --ros-chart-axis: #7f89a0;
  --ros-chart-line: #8b96f5;
  --ros-chart-area-top: rgba(139, 150, 245, 0.3);
  --ros-chart-area-bottom: rgba(139, 150, 245, 0);
  --ros-chart-tooltip-bg: #e8ecf5;
  --ros-chart-tooltip-text: #111827;
  --ros-chart-series-1: #8b96f5;
  --ros-chart-series-2: #34d399;
  --ros-chart-series-3: #fbbf24;
  --ros-chart-series-4: #f87171;

  --ros-focus-ring: 0 0 0 3px rgba(139, 150, 245, 0.45);
  --ros-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --ros-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.35);
  --ros-shadow-3: 0 12px 32px rgba(0, 0, 0, 0.5);
}

@media (prefers-reduced-motion: reduce) {
  :root,
  [data-theme="light"],
  [data-theme="dark"] {
    --ros-motion-fast: 0ms;
    --ros-motion-base: 0ms;
    --ros-motion-slow: 0ms;
  }
}

/* Theme transition: only colour properties, only on the app root, never layout. */
html[data-theme] body {
  background: var(--ros-bg-app);
  color: var(--ros-text-primary);
  font-family: var(--ros-font);
  transition:
    background-color var(--ros-motion-base) var(--ros-ease),
    color var(--ros-motion-base) var(--ros-ease);
}

/* Motion primitives (ROS-RUX3 §17): reveal, entrance, draw. */
@keyframes ros-fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes ros-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ros-draw {
  from {
    stroke-dashoffset: var(--ros-draw-length, 1000);
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes ros-grow-y {
  from {
    transform: scaleY(0.2);
    opacity: 0.4;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

@keyframes ros-shimmer {
  from {
    background-position: -200px 0;
  }
  to {
    background-position: 200px 0;
  }
}

.ros-reveal {
  animation: ros-fade-up var(--ros-motion-slow) var(--ros-ease) both;
}

.ros-reveal-delay-1 {
  animation-delay: 60ms;
}
.ros-reveal-delay-2 {
  animation-delay: 120ms;
}
.ros-reveal-delay-3 {
  animation-delay: 180ms;
}
.ros-reveal-delay-4 {
  animation-delay: 240ms;
}

.ros-fade {
  animation: ros-fade var(--ros-motion-base) var(--ros-ease) both;
}

.ros-skeleton {
  border-radius: var(--ros-radius-sm);
  background: linear-gradient(90deg, var(--ros-skeleton) 0%, var(--ros-surface-2) 50%, var(--ros-skeleton) 100%);
  background-size: 400px 100%;
  animation: ros-shimmer 1.4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .ros-reveal,
  .ros-fade,
  .ros-skeleton,
  .ros-chart-draw,
  .ros-chart-grow {
    animation: none !important;
  }
}

/* Focus (both themes): visible ring, never removed. */
.ros-app :is(a, button, select, input, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--ros-focus-ring);
  border-radius: var(--ros-radius-sm);
}

/* Screen-reader-only helper (shared). */
.ros-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}