:root {

  /* === Colors === */
  --color-primary: #221b3a;
  --color-secondary: #6d6592;
  --color-accent: #7c3aed;
  --color-bg: #f8f7fd;
  --color-background: #f8f7fd;
  --color-surface: #eeedf3;
  --color-text: #111827;
  --color-text-secondary: #6d6592;
  --color-text-muted: #6d6592;
  --color-link: #221b3a;

  /* === Typography === */
  --font-primary: JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --font-secondary: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-base: 1.0625rem;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.1875rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.625rem;
  --font-size-3xl: 2rem;
  --font-size-4xl: 2.75rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height-tight: 1.2;
  --line-height-normal: 1.55;
  --line-height-relaxed: 1.75;

  /* Text scale and density */
  --text-scale: 1.063; /* 0.875 | 1 | 1.125 | 1.25 */
  --text-density: 1.55; /* влияет на line-height */

  /* === Layout === */
  --content-width: 60rem;
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1.125rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 5rem;
  --content-width-readable: 60rem;
  --content-width-wide: 88rem;
  --space-scale: 1.125; /* 0.75 | 1 | 1.25 */;

  /* === Geometry === */
  --radius: 0.75rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.75rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-full: 9999px;
  --border-width: 1px;
  --border-thin: 1px;
  --border-thick: 2px;

  /* === Depth === */
  --shadow-none: none;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.1);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.15);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.2);

  /* === Motion === */
  --transition-fast: 200ms;
  --transition-normal: 250ms;
  --transition-slow: 350ms;
}

/* === Motion System (playful) === */
:root {
  /* Motion tokens */
  --motion-duration-sm: 120ms;
  --motion-duration-md: 180ms;
  --motion-duration-lg: 260ms;
  --motion-ease-standard: cubic-bezier(0.34, 1.26, 0.64, 1);
  --motion-ease-emphasized: cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion-distance-sm: 14px;
  --motion-distance-md: 22px;
  --motion-stagger-step: 70ms;
}

/* Reveal base: only opacity/transform for perf */
/* Safety: without JS, content must remain visible */
[data-motion] {
  opacity: 1;
  transform: none;
}

/* Enable reveal only when JS marks body */
body.trf-motion [data-motion] {
  opacity: 0;
  transform: translate3d(0, var(--motion-distance-sm), 0);
  transition-property: opacity, transform;
  transition-duration: var(--motion-duration-md);
  transition-timing-function: var(--motion-ease-standard);
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, transform;
}
body.trf-motion [data-motion].is-inview {
  opacity: 1;
  transform: none;
}

/* Presets. The larger movements ride the emphasized curve — that is
   what separates a quiet fade-up from a deliberate slide-up. */
body.trf-motion [data-motion="fade"] { transform: none; }
body.trf-motion [data-motion="fade-up"] { transform: translate3d(0, var(--motion-distance-sm), 0); }
body.trf-motion [data-motion="slide-up"] {
  transform: translate3d(0, var(--motion-distance-md), 0);
  transition-timing-function: var(--motion-ease-emphasized);
}
body.trf-motion [data-motion="scale"] { transform: scale(0.98); }
body.trf-motion [data-motion="scale-up"] {
  transform: scale(0.965);
  transition-timing-function: var(--motion-ease-emphasized);
}

/* Stagger: data-motion-stagger on container, data-motion-item on children */
body.trf-motion [data-motion-stagger] > [data-motion-item] {
  transition-delay: calc(var(--motion-delay, 0ms) + (var(--motion-stagger-step) * var(--motion-i, 0)));
}

/* Reduced motion: always visible, no transforms */
@media (prefers-reduced-motion: reduce) {
  [data-motion] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body.trf-motion [data-motion] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Motion flavor hint: default preset preference for generator logic */
:root { --motion-default-preset: "slide-up"; }

/* Site background treatment: soft_blobs (medium) */
:root {
  --bg-image: radial-gradient(circle at 15% 20%, rgba(124, 58, 237, 0.1) 0%, rgba(124, 58, 237, 0) 45%), radial-gradient(circle at 85% 30%, rgba(34, 27, 58, 0.08) 0%, rgba(124, 58, 237, 0) 40%);
}