/* =========================================================
   Design tokenek – minden szín, térköz, sugár itt van.
   Alapból a rendszer témáját követi; a data-theme felülírja.
   ========================================================= */

:root {
  /* Világos téma */
  --bg:            #f4f5f7;
  --surface:       #ffffff;
  --surface-2:     #f0f1f4;
  --border:        #e2e4e9;
  --text:          #16181d;
  --text-muted:    #5d6370;
  --accent:        #3b6cf6;
  --accent-soft:   #e6edff;
  --danger:        #d64545;
  --success:       #2f9e6a;
  --warning:       #c98a12;
  --shadow:        0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);

  /* Méretek */
  --radius-sm: 6px;
  --radius:    12px;
  --radius-lg: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --topbar-h: 56px;
  --nav-w: 72px;
  --tabbar-h: 64px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  color-scheme: light;
}

/* Sötét téma – ha a rendszer sötét és nincs kézi felülírás */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:          #0f1115;
    --surface:     #171a21;
    --surface-2:   #1e222b;
    --border:      #2a2f3a;
    --text:        #e8eaf0;
    --text-muted:  #9aa1b0;
    --accent:      #6d8eff;
    --accent-soft: #1f2a4d;
    --danger:      #f06a6a;
    --success:     #4cc38a;
    --warning:     #e5a93a;
    --shadow:      0 1px 2px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}

/* Kézzel választott sötét téma */
:root[data-theme="dark"] {
  --bg:          #0f1115;
  --surface:     #171a21;
  --surface-2:   #1e222b;
  --border:      #2a2f3a;
  --text:        #e8eaf0;
  --text-muted:  #9aa1b0;
  --accent:      #6d8eff;
  --accent-soft: #1f2a4d;
  --danger:      #f06a6a;
  --success:     #4cc38a;
  --warning:     #e5a93a;
  --shadow:      0 1px 2px rgba(0, 0, 0, .4);
  color-scheme: dark;
}