/* site.css — the shared design tokens for every page on this site.
   Lifted from the app's own public/styles/tokens.css so the site and the product read as one
   thing. Light-first: the light theme is polished hardest, dark stays fully functional.
   Linked by index.html, account.html and app-login.html — edit the values HERE, never inline
   in a page, so the three can never drift apart. */

:root {
  --bg:        #f6f7f9;
  --card:      #ffffff;
  --border:    #e2e8f0;
  --ink:       #0f172a;
  --muted:     #475569;
  --faint:     #94a3b8;

  --sb-bg:     #eef1f5;
  --sb-hover:  rgba(15,23,42,.06);
  --sb-active: rgba(15,23,42,.09);
  --sb-ink:    #1e293b;
  --sb-muted:  #64748b;
  --tabs-bg:   #f1f3f6;
  --tab-active:#ffffff;
  --panel-bg:  #ffffff;

  --chip:      #f1f5f9;
  --chip-ink:  #0f172a;
  --tile:      #e2e8f0;
  --tile-ink:  #475569;

  --green: #22c55e;
  --blue:  #3b82f6;
  --amber: #f59e0b;
  --red:   #ef4444;
  --gray:  #9ca3af;

  --hd-stopped:  #bac6d4;
  --hd-starting: #f2c85c;
  --hd-running:  #4bc793;
  --hd-crashed:  #ec7a63;
  --hd-ink:      rgba(0,0,0,.72);
  --hd-btn:      rgba(255,255,255,.48);
  --hd-btn-hover:rgba(255,255,255,.72);

  --term-bg:     #0e1726;
  --term-ink:    #cbd5e1;
  --term-accent: #34d399;
  --term-dim:    #64748b;

  --link:    #2563eb;
  --primary: #15803d;
  --primary-hover: #166534;

  --shadow:    0 1px 2px rgba(0,0,0,.04), 0 10px 20px rgba(0,0,0,.04);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.06), 0 24px 60px rgba(0,0,0,.12);

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

  /* the footer is its own little universe — same values in both themes */
  --space:      #070b16;
  --space-deep: #04060d;
  --space-ink:  #c3ccdd;
  --space-dim:  #6b7899;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #0f1115;
    --card:      #171a21;
    --border:    #262b36;
    --ink:       #e6e8ec;
    --muted:     #9aa3b2;
    --faint:     #6b7484;

    --sb-bg:     #12151b;
    --sb-hover:  rgba(230,232,236,.06);
    --sb-active: rgba(230,232,236,.10);
    --sb-ink:    #d9dee7;
    --sb-muted:  #8b95a7;
    --tabs-bg:   #13161c;
    --tab-active:#171a21;
    --panel-bg:  #171a21;

    --chip:      #1e232d;
    --chip-ink:  #e6e8ec;
    --tile:      #222732;
    --tile-ink:  #cbd5e1;

    --hd-stopped:  #93a3b5;
    --hd-starting: #e8b94a;
    --hd-running:  #37b482;
    --hd-crashed:  #e06b53;

    --term-bg:   #0b0f17;
    --term-ink:  #cdd3de;

    --link:      #60a5fa;
    --primary:   #18873f;
    --primary-hover: #146834;

    --shadow:    0 1px 2px rgba(0,0,0,.3), 0 12px 24px rgba(0,0,0,.28);
    --shadow-lg: 0 2px 6px rgba(0,0,0,.4), 0 28px 70px rgba(0,0,0,.5);
  }
}