/* ==========================================
   DESIGN TOKENS — Reloloki Foundations v1
   Halogen Industrial · Dark, restrained, engineered
   Shared across: frontend, cabinet
   ========================================== */

:root {
  /* --- Background layers (cool near-black, very low chroma) --- */
  --bg-0: #08090B;    /* page */
  --bg-1: #0C0E11;    /* surface · cards · sidebar */
  --bg-2: #111418;    /* elevated card · table head */
  --bg-3: #171A1F;    /* hover · nested rows */
  --bg-4: #1F232A;    /* highest · popovers */

  /* --- Hairlines --- */
  --line-1: #1A1D22;
  --line-2: #23272E;
  --line-3: #2E333B;

  /* --- Text hierarchy --- */
  --fg-0: #F4F5F7;    /* headlines, KPI numerals */
  --fg-1: #C9CDD4;    /* body copy */
  --fg-2: #878D97;    /* secondary, eyebrows */
  --fg-3: #5B6068;    /* tertiary, table meta */
  --fg-4: #3C4047;    /* faintest, dividers' text */

  /* --- Accent — Signal: halogen lime-cyan --- */
  --accent: #C6FF3D;
  --accent-press: #A8DD24;
  --accent-ink: #0A0B0D;              /* text on accent */
  --accent-soft: rgba(198,255,61,.12);
  --accent-line: rgba(198,255,61,.32);

  /* --- Semantic --- */
  --pos: #3FD68C;    /* paid · success · activated */
  --warn: #F2B23A;   /* hold · awaiting signature */
  --neg: #F26A6A;    /* error · suspended · churn */
  --info: #7CA8FF;   /* notice · onboarding hints */

  /* --- Typography --- */
  --sans: "Geist", ui-sans-serif, -apple-system, "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "JetBrains Mono", "Menlo", monospace;
  --serif: "Fraunces", ui-serif, Georgia, serif; /* aphorisms only — once per page max */

  /* --- Radii --- */
  --r-1: 4px;      /* inputs, chips */
  --r-2: 6px;      /* cards small */
  --r-3: 10px;     /* cards */
  --r-4: 14px;     /* feature cards */
  --r-pill: 999px; /* CTA buttons, status pills */

  /* --- Elevation / shadow --- */
  --el-1: 0 1px 0 rgba(255,255,255,.02) inset, 0 1px 2px rgba(0,0,0,.4);
  --el-2: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px -12px rgba(0,0,0,.6);
  --el-glow: 0 0 0 1px var(--accent-line), 0 0 24px -6px rgba(198,255,61,.25);

  /* --- Spacing scale (4px base, octave) --- */
  --s-0: 2px;
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* --- Layout --- */
  --container-width: 1280px;
  --header-height: 64px;

  /* --- Motion --- */
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition: var(--duration-base) var(--ease-out);
}