/* ============================================================
   МОЗГОСКОК — Design tokens
   Single source of truth for color, type, space, motion.
   ============================================================ */

:root {
  /* ---- Core palette (night / neon) ---- */
  --c-void:        #0a0616;
  --c-night:       #150a30;
  --c-deep:        #1d0f45;
  --c-ink:         #08040f;

  --c-white:       #ffffff;
  --c-mist:        rgba(255, 255, 255, 0.86);
  --c-fog:         rgba(255, 255, 255, 0.60);
  --c-haze:        rgba(255, 255, 255, 0.30);

  /* ---- Neon accents ---- */
  --c-magenta:     #ff4ecd;
  --c-pink:        #ff6ba8;
  --c-cyan:        #22e0ff;
  --c-azure:       #4d9bff;
  --c-violet:      #9b6bff;
  --c-lime:        #a6ff3d;
  --c-mint:        #3dffb0;
  --c-gold:        #ffd23f;
  --c-orange:      #ff8a3d;
  --c-red:         #ff5470;

  /* ---- Semantic ---- */
  --c-accent:      var(--c-magenta);
  --c-accent-2:    var(--c-cyan);
  --c-good:        var(--c-mint);
  --c-bad:         var(--c-red);
  --c-warn:        var(--c-gold);

  /* ---- Category theming (overridden per screen) ---- */
  --cat-a:         var(--c-magenta);
  --cat-b:         var(--c-cyan);

  /* ---- Glass surfaces ---- */
  --glass:         rgba(255, 255, 255, 0.07);
  --glass-strong:  rgba(255, 255, 255, 0.12);
  --glass-border:  rgba(255, 255, 255, 0.16);
  --glass-hi:      rgba(255, 255, 255, 0.28);
  --scrim:         rgba(6, 3, 16, 0.66);

  /* ---- Typography ---- */
  --font-display: ui-rounded, "SF Pro Rounded", "Nunito", "Baloo 2",
                  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-text:    ui-rounded, "SF Pro Rounded", "Nunito", system-ui,
                  -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* fluid type scale */
  --t-2xs:  clamp(0.68rem, 0.64rem + 0.3vw, 0.78rem);
  --t-xs:   clamp(0.78rem, 0.72rem + 0.4vw, 0.9rem);
  --t-sm:   clamp(0.9rem,  0.83rem + 0.5vw, 1.04rem);
  --t-md:   clamp(1.05rem, 0.95rem + 0.7vw, 1.25rem);
  --t-lg:   clamp(1.3rem,  1.1rem + 1.1vw, 1.7rem);
  --t-xl:   clamp(1.7rem,  1.35rem + 1.9vw, 2.4rem);
  --t-2xl:  clamp(2.3rem,  1.7rem + 3vw, 3.6rem);
  --t-3xl:  clamp(3rem,    2rem + 5vw, 5.2rem);

  --lh-tight: 1.05;
  --lh-snug:  1.22;
  --lh-body:  1.45;

  --fw-med:  600;
  --fw-bold: 800;
  --fw-black:900;

  /* ---- Space scale (8pt-ish) ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 22px;
  --s-6: 30px;
  --s-7: 42px;
  --s-8: 60px;

  /* ---- Radius ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* ---- Shadows / glow ---- */
  --sh-1: 0 2px 8px rgba(0,0,0,0.35);
  --sh-2: 0 8px 26px rgba(0,0,0,0.45);
  --sh-3: 0 18px 50px rgba(0,0,0,0.55);
  --glow-accent: 0 0 22px rgba(255, 78, 205, 0.55);
  --glow-cyan:   0 0 22px rgba(34, 224, 255, 0.5);
  --glow-good:   0 0 26px rgba(61, 255, 176, 0.55);
  --inset-hi:    inset 0 1px 0 rgba(255,255,255,0.28);

  /* ---- Motion ---- */
  --e-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --e-spring-2: cubic-bezier(0.22, 1.2, 0.36, 1);
  --e-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --e-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --e-snap:     cubic-bezier(0.5, 0, 0, 1);

  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 380ms;
  --dur-4: 620ms;
  --dur-5: 900ms;

  /* ---- Layering ---- */
  --z-bg:     0;
  --z-fx:     5;
  --z-ui:     10;
  --z-hud:    20;
  --z-overlay:40;
  --z-toast:  60;

  /* ---- Layout ---- */
  --app-max: 560px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* Motion-reduced users: shorten everything, kill big loops. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms;
    --dur-4: 1ms; --dur-5: 1ms;
  }
}