/* ─────────────────────────────────────────────────────────────────────────
 * Elementic · design tokens (dark)
 * Source of truth for the reskin. Verbatim from the designer's :root
 * (ref: /proj/elementic/ref/Makemail.zip → app/styles.css). Defining these
 * variables is INERT on its own — dark-base.css + the retokenized modules
 * are what actually apply them, gated by html[data-theme="dark"]. So this
 * file can load without changing anything until the dark theme is active.
 * ───────────────────────────────────────────────────────────────────────── */

/* Geist / Geist Mono — only fetched when the dark theme link is injected
   (flag ?theme=dark), so the light default pays nothing. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* surfaces — cold neutral chumbo */
  --bg-app:       #0a0d12;
  --bg-panel:     #11141b;
  --bg-elevated:  #161a22;
  --bg-input:     #1b202a;
  --bg-hover:     #1f2532;
  --bg-active:    #232a37;

  /* borders / dividers */
  --border:        #1f2632;
  --border-strong: #2a3140;
  --border-focus:  rgba(95, 162, 255, .55);

  /* text */
  --fg-1: #e7eaf0;
  --fg-2: #aab2c0;
  --fg-3: #757e8e;
  --fg-4: #4f5868;

  /* accent — Topol blue, oklch tuned */
  --accent:       oklch(64% 0.16 254);
  --accent-hi:    oklch(70% 0.16 254);
  --accent-lo:    oklch(56% 0.16 254);
  --accent-soft:  oklch(64% 0.16 254 / 0.14);
  --accent-ring:  oklch(64% 0.16 254 / 0.30);

  /* status */
  --green:  oklch(70% 0.16 152);
  --red:    oklch(67% 0.20 22);
  --amber:  oklch(76% 0.16 75);

  /* canvas */
  --canvas-bg:   #e6e8ec;
  --paper:       #ffffff;
  --paper-edge:  rgba(15,20,30,.10);

  /* type */
  --font-ui:   "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;

  --radius-sm: 4px;
  --radius:    6px;
  --radius-md: 8px;
  --radius-lg: 10px;

  --shadow-1: 0 1px 0 rgba(255,255,255,.03) inset, 0 1px 2px rgba(0,0,0,.4);
  --shadow-pop: 0 8px 24px -8px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4);

  --h-topbar: 48px;
  --w-sidebar: 320px;
  --w-rail: 0px;
}