/* ============================================================
   TutorPrice — дизайн-токены
   Одна точка правды по цвету/ритму/движению. Тема переключается
   подменой значений на :root, компоненты про тему ничего не знают.
   ============================================================ */

:root {
  /* --- палитра: светлая тема ------------------------------- */
  --bg:            #f4f7fb;
  --bg-tint:       #eef3fa;
  --surface:       #ffffff;
  --surface-2:     #f8fafd;
  --surface-3:     #eef2f8;

  --ink:           #0f1729;
  --ink-2:         #3d4759;
  --ink-3:         #68738a;
  --ink-4:         #99a3b5;

  --line:          #e2e8f2;
  --line-2:        #d3dbe9;

  --brand:         #2f6bff;
  --brand-ink:     #1d4fd8;
  --brand-soft:    #e8efff;
  --brand-softer:  #f2f6ff;

  --good:          #12a150;
  --good-ink:      #0c7a3c;
  --good-soft:     #e3f7ec;

  --warn:          #c8811a;
  --warn-soft:     #fdf2df;

  --bad:           #d64545;
  --bad-soft:      #fdecec;

  --violet:        #7c5cf0;
  --violet-soft:   #f0ecfe;

  /* знак: шапочка тёмная, ценник светлее */
  --logo-cap:      #1747c9;
  --logo-tag:      #2f6bff;

  /* --- тени: одна мягкая система, без «борт + тень + заливка» */
  --shadow-1: 0 1px 2px rgba(16, 30, 61, .04);
  --shadow-2: 0 2px 4px rgba(16, 30, 61, .04), 0 8px 24px -12px rgba(16, 30, 61, .12);
  --shadow-3: 0 4px 8px rgba(16, 30, 61, .05), 0 24px 48px -20px rgba(16, 30, 61, .22);
  --shadow-brand: 0 6px 16px -6px rgba(47, 107, 255, .5);

  /* --- ритм ------------------------------------------------ */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-full: 999px;

  --shell: 1200px;
  --header-h: 64px;

  /* --- типографика ----------------------------------------- */
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
          "Helvetica Neue", Arial, sans-serif;
  --font-num: "SF Mono", "Segoe UI Variable Display", var(--font);

  --t-display: clamp(34px, 4.6vw, 54px);
  --t-h1:      clamp(28px, 3.4vw, 40px);
  --t-h2:      clamp(22px, 2.4vw, 28px);
  --t-h3:      18px;
  --t-body:    15px;
  --t-sm:      13.5px;
  --t-xs:      12px;

  /* --- движение -------------------------------------------- */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-in:   cubic-bezier(.55, 0, 1, .45);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 520ms; --dur-5: 800ms;
}

/* --- тёмная тема: только переопределение токенов ------------ */
:root[data-theme="dark"] {
  --bg:            #0b0f18;
  --bg-tint:       #0e1420;
  --surface:       #141b28;
  --surface-2:     #19212f;
  --surface-3:     #202a3b;

  --ink:           #eef2f9;
  --ink-2:         #a9b4c8;
  --ink-3:         #7c8799;
  --ink-4:         #5b6577;

  --line:          #232d3f;
  --line-2:        #2e3a4f;

  --brand:         #5b8bff;
  --brand-ink:     #85a8ff;
  --brand-soft:    #17233d;
  --brand-softer:  #131c30;

  --good:          #34c77b;
  --good-ink:      #56d894;
  --good-soft:     #102a1e;

  --warn:          #e0a13c;
  --warn-soft:     #2c2213;

  --bad:           #f0685f;
  --bad-soft:      #2e1618;

  --violet:        #9d84f7;
  --violet-soft:   #1e1a35;

  --logo-cap:      #5b8bff;
  --logo-tag:      #9dbcff;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6);
  --shadow-3: 0 4px 8px rgba(0, 0, 0, .35), 0 24px 48px -20px rgba(0, 0, 0, .75);
  --shadow-brand: 0 6px 16px -6px rgba(47, 107, 255, .55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0b0f18;
    --bg-tint:       #0e1420;
    --surface:       #141b28;
    --surface-2:     #19212f;
    --surface-3:     #202a3b;

    --ink:           #eef2f9;
    --ink-2:         #a9b4c8;
    --ink-3:         #7c8799;
    --ink-4:         #5b6577;

    --line:          #232d3f;
    --line-2:        #2e3a4f;

    --brand:         #5b8bff;
    --brand-ink:     #85a8ff;
    --brand-soft:    #17233d;
    --brand-softer:  #131c30;

    --good:          #34c77b;
    --good-ink:      #56d894;
    --good-soft:     #102a1e;

    --warn:          #e0a13c;
    --warn-soft:     #2c2213;

    --bad:           #f0685f;
    --bad-soft:      #2e1618;

    --violet:        #9d84f7;
    --violet-soft:   #1e1a35;

    --logo-cap:      #5b8bff;
    --logo-tag:      #9dbcff;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-2: 0 2px 4px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6);
    --shadow-3: 0 4px 8px rgba(0, 0, 0, .35), 0 24px 48px -20px rgba(0, 0, 0, .75);
  }
}