/* Graphite Console — design tokens
   Live reference: https://granqvistsanna-web.github.io/graphite-console/
   Use from any project:
   <link rel="stylesheet" href="https://granqvistsanna-web.github.io/graphite-console/tokens.css"> */

@font-face {
  font-family: "Geist";
  src: url("fonts/GeistVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/GeistMonoVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* surface ladder — elevation is lightness, no shadows */
  --bg-0: #0f0f0f;   /* canvas */
  --bg-1: #171717;   /* panel / modal */
  --bg-2: #222222;   /* control at rest */
  --bg-3: #2e2e2e;   /* active / fill / selected */
  --bg-4: #3a3a3a;   /* hover on raised */
  --hairline: rgba(255,255,255,.08);

  /* ink ladder */
  --ink-hi: #f2f2f2;
  --ink-mid: #b3b3b3;
  --ink-low: #8a8a8a;
  --ink-faint: #5f5f5f;

  /* inverse pair — the only accent */
  --inverse-bg: #ffffff;
  --inverse-ink: #101010;

  /* radius */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px;
  --r-lg: 16px; --r-xl: 20px; --r-pill: 999px;

  /* size & rhythm (base-4) */
  --row-h: 48px;        --gap-row: 10px;
  --pad-control: 16px;  --pad-panel: 20px;
  --gap-section: 32px;

  /* type: Geist for everything; hierarchy via size/weight/ink.
     display 56/700/-2% · title-lg 24/700 · title 19/650
     label 15/400 ink-mid · value 15/500 ink-hi tabular
     section 11/600/+14% CAPS · caption 13 · micro 12/500 */
  --font-ui: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  /* motion */
  --ease: cubic-bezier(.25,.1,.25,1);
  --t-fast: 120ms;  --t-med: 180ms;
}