/* ============================================================
   DESIGN TOKENS — Light & Dark
============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root, [data-theme="light"] {
  --bg:           #f0f0eb;
  --surface:      #ffffff;
  --surface-alt:  #f7f7f3;
  --border:       #e2e2dc;
  --border-strong:#c6c6be;
  --text:         #18180f;
  --text-2:       #5a5a52;
  --text-3:       #9a9a90;
  --logo-bg:      #18180f;
  --logo-fg:      #ffffff;
  --btn-bg:       #18180f;
  --btn-fg:       #ffffff;
  --ghost-hover:  #eaeae4;
  --sidebar-hover:#f4f4ef;
  --input-bg:     #f0f0eb;
  --canvas-dot:   #c4c4bc;
  --kbd-bg:       #e6e6e0;
  --toggle-track: #d0d0c8;
  --toggle-thumb: #ffffff;
  --toggle-active:#4f46e5;
  --shadow-card:  0 20px 60px rgba(0,0,0,.14), 0 4px 16px rgba(0,0,0,.08);
}

[data-theme="dark"] {
  --bg:           #101010;
  --surface:      #1a1a18;
  --surface-alt:  #202020;
  --border:       #2a2a26;
  --border-strong:#3a3a36;
  --text:         #f2f2ee;
  --text-2:       #9e9e96;
  --text-3:       #5a5a56;
  --logo-bg:      #f2f2ee;
  --logo-fg:      #101010;
  --btn-bg:       #f2f2ee;
  --btn-fg:       #101010;
  --ghost-hover:  #252524;
  --sidebar-hover:#1e1e1c;
  --input-bg:     #101010;
  --canvas-dot:   #202020;
  --kbd-bg:       #222220;
  --toggle-track: #3a3a38;
  --toggle-thumb: #f2f2ee;
  --toggle-active:#6366f1;
  --shadow-card:  0 20px 60px rgba(0,0,0,.45), 0 4px 16px rgba(0,0,0,.3);
}