/* =====================================================================
   MV Therapy — design tokens (redesign-2026)
   Üks jagatud allikas: värvid, tüpograafia, vahed, varjud, raadiused,
   animatsiooniajad. Lilla on tuletatud saidi algsest CSS-ist (vt
   DESIGN_NOTES.md §3). Heledamad/tumedamad toonid on segatud valge või
   mustaga, mis säilitab hue (≈ 241°).
   ===================================================================== */

:root {
  /* ---------- Brändililla: algsed toonid (ära muuda) ---------- */
  --brand-purple-25:          #fafafd;
  --brand-purple-50:          #f5f4fa; /* lehe taust (algne --bg) */
  --brand-purple-50-cool:     #f4f5fa;
  --brand-purple-50-soft:     #f4f4f9;
  --brand-purple-75:          #f1f0fb;
  --brand-purple-75-soft:     #f1f0f9;
  --brand-purple-75-cool:     #f0f0fa;
  --brand-purple-90:          #efeef8;
  --brand-purple-100:         #eeedf8; /* algne --brand-bg */
  --brand-purple-100-soft:    #ececf5;
  --brand-purple-150:         #e8e7f0;
  --brand-purple-175:         #e3e1f3;
  --brand-purple-175-cool:    #e3e4f5;
  --brand-purple-200:         #e2e0f3;
  --brand-purple-200-soft:    #e2e2ec;
  --brand-purple-300:         #cfcbec;
  --brand-purple-500:         #6c6bb5; /* algne --brand-accent */
  --brand-purple-600:         #5c5b9e; /* algne --brand-light */
  --brand-purple-600-vivid:   #5a59a3;
  --brand-purple-700:         #44437d; /* PÕHIBRÄND, theme-color, SalonLife */
  --brand-purple-750:         #35346a;
  --brand-purple-800:         #333259; /* algne hover */
  --brand-purple-800-muted:   #332f52;
  --brand-purple-850:         #222259;
  --brand-purple-900:         #211f3f;
  --brand-purple-950:         #1a1832; /* algne tekstivärv */
  --brand-purple-ink-muted:   #5e5977; /* algne --text-secondary */

  /* ---------- Tuletatud toonid (sama hue, segatud valge/mustaga) ---------- */
  --brand-purple-400:         color-mix(in srgb, var(--brand-purple-500) 75%, #fff);
  --brand-purple-350:         color-mix(in srgb, var(--brand-purple-500) 60%, #fff);
  --brand-purple-975:         color-mix(in srgb, var(--brand-purple-950) 70%, #000);
  --brand-purple-a08:         rgb(68 67 125 / .08);
  --brand-purple-a12:         rgb(68 67 125 / .12);
  --brand-purple-a20:         rgb(68 67 125 / .20);
  --brand-purple-a35:         rgb(68 67 125 / .35);

  /* Neutraalid (toeks) */
  --neutral-0:   #ffffff;
  --neutral-100: #f8f9fb;
  --neutral-300: #e0e0e0;
  --neutral-900: #0b0b12;
  --success-600: #0f9d58; /* algne --ok */

  /* ---------- Semantilised tokenid: LIGHT ---------- */
  --color-bg:             var(--brand-purple-50);
  --color-bg-alt:         var(--brand-purple-25);
  --color-surface:        var(--neutral-0);
  --color-surface-2:      var(--brand-purple-100);
  --color-surface-glass:  rgb(255 255 255 / .72);
  --color-text:           var(--brand-purple-950);
  --color-text-muted:     var(--brand-purple-ink-muted);
  --color-line:           var(--brand-purple-a12);
  --color-line-strong:    var(--brand-purple-a20);
  --color-brand:          var(--brand-purple-700);
  --color-brand-strong:   var(--brand-purple-800);
  --color-brand-soft:     var(--brand-purple-100);
  --color-on-brand:       #ffffff;
  --color-link:           var(--brand-purple-700);
  --color-link-hover:     var(--brand-purple-850);
  --color-focus:          var(--brand-purple-500);
  --color-hero-ink:       #ffffff;
  --color-hero-bg:        var(--brand-purple-700);
  --color-placeholder:    var(--brand-purple-300);

  --gradient-brand: linear-gradient(135deg, var(--brand-purple-700) 0%, var(--brand-purple-500) 100%);
  --gradient-hero:  radial-gradient(120% 90% at 85% 10%, var(--brand-purple-500) 0%, transparent 55%),
                    radial-gradient(90% 80% at 0% 100%, var(--brand-purple-850) 0%, transparent 60%),
                    linear-gradient(160deg, var(--brand-purple-750) 0%, var(--brand-purple-700) 45%, var(--brand-purple-800) 100%);
  --gradient-soft:  linear-gradient(180deg, var(--brand-purple-25) 0%, var(--brand-purple-100) 100%);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ---------- Tüpograafia ---------- */
  --font-sans:  'Onest', 'Onest Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Source Serif 4', 'Source Serif Fallback', Georgia, 'Times New Roman', serif;

  /* Fluid type scale (360px → 1440px) */
  --step--2: clamp(.75rem, .73rem + .08vw, .8rem);
  --step--1: clamp(.85rem, .82rem + .12vw, .93rem);
  --step-0:  clamp(1rem, .96rem + .18vw, 1.1rem);
  --step-1:  clamp(1.15rem, 1.07rem + .35vw, 1.4rem);
  --step-2:  clamp(1.35rem, 1.2rem + .65vw, 1.85rem);
  --step-3:  clamp(1.6rem, 1.35rem + 1.1vw, 2.5rem);
  --step-4:  clamp(2rem, 1.6rem + 1.8vw, 3.4rem);
  --step-5:  clamp(2.4rem, 1.8rem + 2.8vw, 4.6rem);
  --step-6:  clamp(2.8rem, 1.9rem + 4.2vw, 6rem);

  --leading-tight: 1.08;
  --leading-snug:  1.25;
  --leading-body:  1.62;
  --tracking-tight: -.022em;
  --tracking-caps:  .08em;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;

  /* ---------- Vahed ---------- */
  --space-3xs: .25rem;
  --space-2xs: .5rem;
  --space-xs:  .75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2rem;
  --space-xl:  3rem;
  --space-2xl: clamp(3.5rem, 2.5rem + 4vw, 6rem);
  --space-3xl: clamp(5rem, 3rem + 7vw, 9rem);
  --gutter:    clamp(1rem, .6rem + 1.8vw, 2rem);
  --container: 1240px;
  --container-wide: 1440px;
  --header-h:  72px;

  /* ---------- Raadiused ---------- */
  --radius-xs:   8px;
  --radius-s:    12px;
  --radius-m:    18px;
  --radius-l:    26px;
  --radius-xl:   36px;
  --radius-pill: 999px;

  /* ---------- Varjud (lillaka tooniga) ---------- */
  --shadow-xs: 0 1px 2px rgb(26 24 50 / .06);
  --shadow-s:  0 4px 16px rgb(26 24 50 / .06), 0 1px 2px rgb(26 24 50 / .04);
  --shadow-m:  0 12px 32px -8px rgb(26 24 50 / .12), 0 2px 6px rgb(26 24 50 / .04);
  --shadow-l:  0 28px 64px -16px rgb(34 34 89 / .22), 0 6px 16px rgb(26 24 50 / .06);
  --shadow-brand: 0 12px 30px -8px rgb(68 67 125 / .45);
  --ring: 0 0 0 3px var(--color-bg), 0 0 0 5px var(--color-focus);

  /* ---------- Liikumine ---------- */
  --dur-instant: 90ms;
  --dur-fast:    160ms;
  --dur-base:    280ms;
  --dur-slow:    520ms;
  --dur-slower:  900ms;
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  /* ---------- Kihid ---------- */
  --z-base: 1;
  --z-sticky: 90;
  --z-header: 100;
  --z-overlay: 200;
  --z-cursor: 9000;

  color-scheme: light;
}

/* ---------- DARK (süsteemi eelistus, kui kasutaja pole heledat valinud) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:            var(--brand-purple-975);
    --color-bg-alt:        var(--brand-purple-950);
    --color-surface:       var(--brand-purple-950);
    --color-surface-2:     var(--brand-purple-900);
    --color-surface-glass: rgb(26 24 50 / .72);
    --color-text:          var(--brand-purple-75);
    --color-text-muted:    var(--brand-purple-300);
    --color-line:          rgb(207 203 236 / .12);
    --color-line-strong:   rgb(207 203 236 / .22);
    --color-brand:         var(--brand-purple-700);
    --color-brand-strong:  var(--brand-purple-600);
    --color-brand-soft:    var(--brand-purple-900);
    --color-link:          var(--brand-purple-350);
    --color-link-hover:    var(--brand-purple-200);
    --color-focus:         var(--brand-purple-350);
    --color-hero-bg:       var(--brand-purple-850);
    --color-placeholder:   var(--brand-purple-750);
    --gradient-soft: linear-gradient(180deg, var(--brand-purple-975) 0%, var(--brand-purple-950) 100%);
    --shadow-s:  0 4px 16px rgb(0 0 0 / .35);
    --shadow-m:  0 12px 32px -8px rgb(0 0 0 / .5);
    --shadow-l:  0 28px 64px -16px rgb(0 0 0 / .6);
    color-scheme: dark;
  }
}
/* ---------- DARK (kasutaja valik) ---------- */
:root[data-theme="dark"] {
  --color-bg:            var(--brand-purple-975);
  --color-bg-alt:        var(--brand-purple-950);
  --color-surface:       var(--brand-purple-950);
  --color-surface-2:     var(--brand-purple-900);
  --color-surface-glass: rgb(26 24 50 / .72);
  --color-text:          var(--brand-purple-75);
  --color-text-muted:    var(--brand-purple-300);
  --color-line:          rgb(207 203 236 / .12);
  --color-line-strong:   rgb(207 203 236 / .22);
  --color-brand:         var(--brand-purple-700);
  --color-brand-strong:  var(--brand-purple-600);
  --color-brand-soft:    var(--brand-purple-900);
  --color-link:          var(--brand-purple-350);
  --color-link-hover:    var(--brand-purple-200);
  --color-focus:         var(--brand-purple-350);
  --color-hero-bg:       var(--brand-purple-850);
  --color-placeholder:   var(--brand-purple-750);
  --gradient-soft: linear-gradient(180deg, var(--brand-purple-975) 0%, var(--brand-purple-950) 100%);
  --shadow-s:  0 4px 16px rgb(0 0 0 / .35);
  --shadow-m:  0 12px 32px -8px rgb(0 0 0 / .5);
  --shadow-l:  0 28px 64px -16px rgb(0 0 0 / .6);
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
    --dur-slower: 1ms;
  }
}