/* ==========================================================
   1) DESIGN TOKENS
   ---------------------------------------------------------- */
:root {
  /* Colors */
  --bg: #202834;
  --text: #fff;
  --accent: #3498db;
  --danger: #e74c3c;
  --sidebar-bg: #2c3e50;
  --sidebar-fg: #fff;
  --curtain-bg: #66737f;
  --curtain-fg: #fff;
  --top-label-bg: #2c3e50;

  /* Spacing / sizing */
  --space-1: 6px;
  --space-2: 12px;
  --space-3: 18px;
  --space-4: 24px;

  /* Typography */
  --label-font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --label-font-desktop: 14px;

  /* Sidebar / grid (mobile defaults) */
  --grid-cols: 6;
  --grid-rows: 10;
  --cell-size: calc(100dvh / var(--grid-rows));
  --sidebar-w: var(--cell-size);
  --bottom-icons-rows: 2;

  /* Curtain sizing */
  --c1-width-cells: calc(var(--grid-cols) - 3.5);
  --c2-width-cells: var(--c1-width-cells);
  --curtain1-width: calc(var(--cell-size) * var(--c1-width-cells));
  --curtain2-width: calc(var(--cell-size) * var(--c2-width-cells));

  /* Transitions */
  --c2-duration: 220ms;
  --c2-ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* z-index helpers (mobile) */
  --z-mobile-sidebar: 40;
  --z-mobile-curtain1: 20;
  --z-mobile-curtain2: 10;
}

/* ==========================================================
   2) RESET / BASE
   ---------------------------------------------------------- */
* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  outline: 0;
  padding: 0;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

[hidden] { display: none !important; }