/*variables css*/

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap");

/* ── Dark mode (default) ─────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg:        #1a1a1a;
  --surface:   #242424;
  --surface-2: #2e2e2e;
  --border:    #3a3a3a;

  /* Accent — yellow */
  --accent:     #f0d316;
  --accent-dim: #d4a800;

  /* Status — green */
  --green:     #077333;
  --green-dim: #055a28;

  /* Text */
  --text:        #e8e3dc;
  --text-muted:  #8a857e;
  --text-subtle: #5a5550;

  /* Semantic */
  --error:   #e05555;
  --success: #4caf87;

  /* Typography */
  --font-ui:   "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", monospace;

  /* Motion */
  --tr:         0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1); /* alias */

  /* Layout tokens (used by specific pages) */
  --topbar-h:  52px;
  --sidebar-w: 220px;
  --panel-w:   300px;
  --slide-dur:  0.5s;
  --slide-ease: cubic-bezier(0.77, 0, 0.18, 1);
}

/* ── Light mode ──────────────────────────────────────────── */
[data-theme="light"] {
  --bg:        #f5f5f0;
  --surface:   #ffffff;
  --surface-2: #f0f0eb;
  --border:    #d0d0c8;

  --accent:     #c9a000;
  --accent-dim: #a88500;

  --green:     #077333;
  --green-dim: #055a28;

  --text:        #1a1a1a;
  --text-muted:  #5a5a5a;
  --text-subtle: #8a8a8a;

  --error:   #c94444;
  --success: #3d9970;
}