/* =========================================================
   3KONA app — design tokens (single source of truth)
   Dark theme · amber accent · Onest + Space Mono
   Values mirror the 3kona.com marketing site design system.
   Loaded by every page; pages use tokens, never raw colours.
   Fonts are loaded via <link> in each page <head>.
   ========================================================= */
:root{
  color-scheme:dark;

  /* text */
  --ink:#ffffff;
  --ink-2:#b8b8b8;
  --muted:#8a8a8a;

  /* lines / surfaces */
  --bg:#111111;
  --card:#1a1a1a;
  --soft:#242424;
  --dark:#0b0b0b;
  --line:#333333;
  --line-2:#4a4a4a;
  --grid-line:rgba(255,255,255,.035);
  --overlay:rgba(0,0,0,.72);

  /* accent (3KONA amber) */
  --accent:#FFC107;
  --accent-press:#e6ac00;
  --accent-soft:rgba(255,193,7,.14);
  --accent-line:rgba(255,193,7,.42);
  --on-accent:#111111;

  /* semantic */
  --ok:#33b06a;
  --ok-soft:rgba(51,176,106,.14);
  --ok-ink:#5fd08f;
  --warn:#e5484d;
  --warn-soft:rgba(229,72,77,.14);

  /* type */
  --sans:'Onest','SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Space Mono',monospace;

  /* shape */
  --radius:10px;
  --radius-lg:12px;
  --radius-pill:999px;
  --shadow:0 10px 40px rgba(0,0,0,.35);
  --shadow-pop:0 14px 40px rgba(0,0,0,.5);

  /* layout */
  --gutter:clamp(16px,3vw,32px);
}

/* ---- base: 3KONA ground + engineering grid ---- */
*,*::before,*::after{box-sizing:border-box}
html,body{background:var(--bg);color:var(--ink)}
body{margin:0;font-family:var(--sans);line-height:1.5;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:44px 44px}
body>*{position:relative;z-index:1}
::selection{background:var(--accent);color:var(--on-accent)}
a{color:var(--accent)}