/* ============================================================
   TOKENS · единственный источник правды для всего кита.
   data-theme="light|dark"  data-accent="blue|purple|green|pink"
   ============================================================ */
:root {
  --font: -apple-system, "SF Pro Text", "SF Pro Display", system-ui,
          "Helvetica Neue", Arial, sans-serif;
  --fs-control: 13px;
  --fs-body:    13px;
  --fs-title:   17px;
  --fs-caption: 11px;

  --r-control: 8px;
  --r-field:   8px;
  --r-panel:   22px;
  --r-pill:    999px;

  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;

  --accent:       #007aff;
  --accent-press: #0060df;
  --on-accent:    #ffffff;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .18s;
}

/* LIGHT */
[data-theme="light"] {
  --text:   #1d1d1f;
  --text-2: #6e6e73;
  --text-3: #9a9aa0;

  --glass:        rgba(255,255,255,.62);
  --glass-2:      rgba(255,255,255,.45);
  --glass-border: rgba(255,255,255,.6);
  --glass-shadow: 0 10px 34px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.7) inset;

  --fill:        rgba(120,120,128,.10);
  --fill-strong: rgba(120,120,128,.16);
  --fill-hover:  rgba(120,120,128,.20);
  --separator:   rgba(60,60,67,.10);
  --track:       rgba(120,120,128,.20);
  --knob:        #ffffff;
  --knob-shadow: 0 1px 3px rgba(0,0,0,.2), 0 3px 8px rgba(0,0,0,.12);

  --node-ring: #f4f4f6;
  --wall-a: #eceef1; --wall-b: #f5f5f7; --wall-c: #e9ebee;
  --spec-1: rgba(255,255,255,.6); --spec-2: rgba(210,214,222,.4);
}

/* DARK */
[data-theme="dark"] {
  --text:   #f5f5f7;
  --text-2: #98989d;
  --text-3: #636366;

  --glass:        rgba(28,28,30,.6);
  --glass-2:      rgba(58,58,60,.5);
  --glass-border: rgba(255,255,255,.1);
  --glass-shadow: none;

  --fill:        rgba(255,255,255,.07);
  --fill-strong: rgba(255,255,255,.12);
  --fill-hover:  rgba(255,255,255,.16);
  --separator:   rgba(255,255,255,.09);
  --track:       rgba(255,255,255,.16);
  --knob:        #ffffff;
  --knob-shadow: 0 1px 3px rgba(0,0,0,.5), 0 3px 8px rgba(0,0,0,.35);

  --node-ring: #1c1c1e;
  --wall-a: #000000; --wall-b: #141416; --wall-c: #0a0a0b;
  --spec-1: rgba(255,255,255,.06); --spec-2: rgba(120,120,130,.08);
}

/* ACCENTS */
[data-accent="blue"]   { --accent: #007aff; --accent-press: #0060df; }
[data-accent="purple"] { --accent: #8a5cf6; --accent-press: #7440ec; }
[data-accent="green"]  { --accent: #30b955; --accent-press: #249a44; }
[data-accent="pink"]   { --accent: #ff375f; --accent-press: #e01e49; }