/* Project Horizon — design tokens + motion system (one file for the site and ShoulderPlanner; keep both copies identical:
   ShoulderPlanner-relay/relay/static/horizon.css ↔ ShoulderPlanner/shoulderplanner/static/horizon.css, test checks it).
   Colours: brand kit «Рассвет — глубже» (Artiqo/Логотип/Project_Horizon/palette.css, 30.10.2026). Motion: spec 30.10.2026
   («implement Motion Design System»): balanced, Linear-like, no bounce, transform/opacity only. Docs: docs/MOTION_DESIGN_SYSTEM.md.
   Medical rule: nothing inside [data-viewer] (CT / MRI / 3D canvases, measurement tools) is ever animated. */

/* ---------------------------------------------------------------- colour */
:root {
  --ph-bg: #FBF6F3; --ph-panel: #FFFFFF; --ph-line: #EEDFDA; --ph-ink: #2B1838; --ph-ink2: #75627A; --ph-soft: #F6ECE8;
  --ph-accent: #9E3C7E; --ph-accent-hover: #86306A; --ph-accent-ink: #FFFFFF; --ph-tint: #F7E8F1;
  --ph-accent2: #EF8250;                       /* lines, «actual», graphics — not for text */
  --ph-plan: #9D8DB0; --ph-ok: #4FA58A; --ph-warn: #E9A23B; --ph-err: #D9475F;
  --ph-ok-bg: #E2F2EC; --ph-ok-ink: #2F7560; --ph-warn-bg: #FBEBD2; --ph-warn-ink: #7A4D0B; --ph-err-bg: #FBE3E7; --ph-err-ink: #A3263B;
  --ph-sunset: linear-gradient(90deg, #C4589E, #F08A5D);
  --ph-focus: color-mix(in srgb, var(--ph-accent) 28%, transparent);
  /* plum / sunset scales (charts, tags, legacy names) */
  --plum-50: #F7E8F1; --plum-100: #F0D3E4; --plum-200: #E2AFCF; --plum-300: #D27BB4; --plum-400: #B8579A; --plum-500: #A8468A;
  --plum-600: #9E3C7E; --plum-700: #86306A; --plum-800: #5E2550; --plum-900: #2B1838;
  --sun-50: #FDF0E9; --sun-100: #FBDCCB; --sun-500: #EF8250; --sun-600: #D96A39; --sun-700: #B5532A;
  --ph-scene: #FFFFFF;                          /* 3D viewer background */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ph-bg: #1A1424; --ph-panel: #251B33; --ph-line: #3A2D4C; --ph-ink: #FBF4F7; --ph-ink2: #C2A9C4; --ph-soft: #2E2240;
    --ph-accent: #D27BB4; --ph-accent-hover: #E395C6; --ph-accent-ink: #1A1424; --ph-tint: #3A2443;
    --ph-ok-bg: #1E3A33; --ph-ok-ink: #8AD3BB; --ph-warn-bg: #3E2E17; --ph-warn-ink: #F3C47A; --ph-err-bg: #3D1C25; --ph-err-ink: #F7A1B0;
    --ph-scene: #1A1424;
  }
}
:root[data-theme="dark"] {
  --ph-bg: #1A1424; --ph-panel: #251B33; --ph-line: #3A2D4C; --ph-ink: #FBF4F7; --ph-ink2: #C2A9C4; --ph-soft: #2E2240;
  --ph-accent: #D27BB4; --ph-accent-hover: #E395C6; --ph-accent-ink: #1A1424; --ph-tint: #3A2443;
  --ph-ok-bg: #1E3A33; --ph-ok-ink: #8AD3BB; --ph-warn-bg: #3E2E17; --ph-warn-ink: #F3C47A; --ph-err-bg: #3D1C25; --ph-err-ink: #F7A1B0;
  --ph-scene: #1A1424;
}

/* ---------------------------------------------------------------- type, space, shape */
:root {
  --ph-font-display: 'Unbounded', 'Onest', sans-serif;      /* logo, page titles only */
  --ph-font: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ph-text-xs: 12px; --ph-text-sm: 13px; --ph-text: 14px; --ph-text-md: 15px; --ph-text-lg: 17px; --ph-text-xl: 22px; --ph-text-2xl: 26px;
  --ph-space-1: 4px; --ph-space-2: 8px; --ph-space-3: 12px; --ph-space-4: 16px; --ph-space-5: 20px; --ph-space-6: 24px; --ph-space-8: 32px;
  --ph-radius-xs: 6px; --ph-radius-sm: 10px; --ph-radius: 14px; --ph-radius-lg: 20px; --ph-radius-pill: 999px;
  --ph-shadow-sm: 0 1px 2px rgba(43, 24, 56, .05), 0 2px 8px rgba(43, 24, 56, .05);
  --ph-shadow-md: 0 6px 20px rgba(43, 24, 56, .10);
  --ph-shadow-lg: 0 14px 36px rgba(43, 24, 56, .16);
}

/* ---------------------------------------------------------------- motion tokens */
:root {
  --m-instant: 100ms; --m-fast: 150ms; --m-normal: 200ms; --m-moderate: 280ms; --m-slow: 350ms; --m-emphasis: 450ms;
  --m-ease: cubic-bezier(0.2, 0, 0, 1);          /* standard */
  --m-ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --m-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --m-micro: 3px; --m-card: 8px; --m-modal: 10px;  /* distances */
  --m-hover-scale: 1.015; --m-press-scale: .98;
}
@media (prefers-reduced-motion: reduce) {
  :root { --m-instant: 1ms; --m-fast: 1ms; --m-normal: 1ms; --m-moderate: 1ms; --m-slow: 1ms; --m-emphasis: 1ms;
          --m-micro: 0px; --m-card: 0px; --m-modal: 0px; --m-hover-scale: 1; --m-press-scale: 1; }
}

/* ---------------------------------------------------------------- keyframes (transform / opacity only) */
@keyframes ph-in { from { opacity: 0; transform: translateY(var(--m-shift, var(--m-card))); } to { opacity: 1; transform: none; } }
@keyframes ph-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(calc(var(--m-shift, var(--m-card)) * -.5)); } }
@keyframes ph-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ph-pop { from { opacity: 0; transform: translateY(var(--m-modal)) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes ph-spin { to { transform: rotate(360deg); } }
@keyframes ph-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------------------------------------------------------------- presets (utility classes) */
.m-page { animation: ph-in var(--m-moderate) var(--m-ease-enter) both; --m-shift: var(--m-micro); }      /* view content, not the shell */
.m-enter { animation: ph-in var(--m-normal) var(--m-ease-enter) both; }
.m-exit { animation: ph-out var(--m-fast) var(--m-ease-exit) both; pointer-events: none; }
.m-fade { animation: ph-fade var(--m-normal) var(--m-ease) both; }
.m-list > * { animation: ph-in var(--m-normal) var(--m-ease-enter) both; --m-shift: var(--m-micro); }
.m-list > :nth-child(2) { animation-delay: 30ms; } .m-list > :nth-child(3) { animation-delay: 60ms; }
.m-list > :nth-child(4) { animation-delay: 90ms; } .m-list > :nth-child(n+5) { animation-delay: 120ms; }   /* stagger capped */

/* interactive feedback: add .m-press to anything clickable that is not a <button> */
.m-press { transition: transform var(--m-fast) var(--m-ease), background-color var(--m-normal) var(--m-ease),
           border-color var(--m-normal) var(--m-ease), color var(--m-normal) var(--m-ease), box-shadow var(--m-normal) var(--m-ease); }
.m-press:active { transform: scale(var(--m-press-scale)); transition-duration: var(--m-instant); }
.m-card { transition: background-color var(--m-normal) var(--m-ease), box-shadow var(--m-normal) var(--m-ease), border-color var(--m-normal) var(--m-ease); }
.m-card:hover { box-shadow: var(--ph-shadow-md); }

/* busy / success states (set by motion.js only on real server responses) */
.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.is-busy::after { content: ''; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-color: var(--m-spin-color, var(--ph-accent-ink)) transparent var(--m-spin-color, var(--ph-accent-ink)) transparent;
  animation: ph-spin .8s linear infinite; }                         /* a real, running state — not decoration */
.is-done { animation: ph-fade var(--m-normal) var(--m-ease) both; }

/* the medical rule: viewers never move as a side effect of UI motion */
[data-viewer], [data-viewer] * { animation: none !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
  .is-busy::after { animation-duration: 1.6s; }                    /* state stays visible, slower */
}