/* ============================================================
   LunarTask Design Tokens — minimal black & white futurist.

   Single source of truth for non-Tailwind components.
   Mirrors tailwind.config.ts. Keep them in lockstep.

   Hard rules:
     1. No hue. No accent color. No tinted shadows or glows.
     2. Never write #000 or #FFF in components. Reach for tokens.
        Primary black is #0A0A0A — never literal black.
     3. Sharp corners by default. Radius is the exception.
     4. Hairline borders + generous whitespace > shadows for hierarchy.
     5. Hover / active states derive from black alpha only.
   ============================================================ */

:root {
  /* --- Surface ---------------------------------------------- */
  --bg-base: #FFFFFF;
  --bg-raised: #FAFAFA;
  --bg-inverse: #0A0A0A;

  /* --- Ink (text) ------------------------------------------- */
  --ink-primary: #0A0A0A;
  --ink-secondary: #6B6B6B;
  --ink-tertiary: #A8A8A8;
  --ink-inverse: #FFFFFF;

  /* --- Line (borders, dividers) ----------------------------- */
  --line-hairline: rgba(10, 10, 10, 0.08);
  --line-subtle:   rgba(10, 10, 10, 0.12);
  --line-strong:   rgba(10, 10, 10, 0.24);

  /* --- Interaction states ----------------------------------- */
  --state-hover:  rgba(10, 10, 10, 0.04);
  --state-active: rgba(10, 10, 10, 0.08);

  /* --- Radius — sharp by default ---------------------------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* --- Border width — sub-pixel hairline -------------------- */
  --border-hairline: 0.5px;

  /* --- Typography ------------------------------------------- */
  --font-sans:  "Inter Tight", Inter, -apple-system, sans-serif;
  --font-serif: "Instrument Serif", serif;
  --font-mono:  "JetBrains Mono", ui-monospace, monospace;

  /* --- Spacing — semantic gap scale (4px grid) -------------- */
  --gap-xs:  8px;
  --gap-sm:  16px;
  --gap-md:  24px;
  --gap-lg:  48px;
  --gap-xl:  96px;
  --gap-2xl: 160px;
}