/* ==========================================================================
   VARIABLES — design tokens
   Single source of truth for color, typography and spacing primitives.
   Never hardcode these values elsewhere; reference the custom property.
   ========================================================================== */

:root{
  color-scheme: dark;

  /* Surfaces — near-black with a whisper of ELEFELE blue, not generic #0a0a0a */
  --bg:#07080b;
  --bg-2:#0b0d12;

  /* Text */
  --text:#f2f3f1;
  --text-dim:#9aa1ac;
  --text-faint:#5c6270;

  /* Accent — deep ultramarine electric blue. Reworked from a generic sky
     blue (#3d8bff) into a richer, more saturated, more "owned" tone —
     still unmistakably blue (not purple, like several referenced brands). */
  --accent:#2f5eff;
  --accent-deep:#12245c;
  --accent-soft:rgba(47,94,255,0.15);

  /* Structure */
  --grid-line:rgba(255,255,255,0.045);
  --border:rgba(255,255,255,0.09);

  /* Signature geometry — sharp, architectural corners instead of soft
     SaaS-standard rounding. This + the bracket motif (components.css)
     is what makes ELEFELE recognizable at a glance. */
  --radius:3px;
  --radius-pill:6px;

  /* Typography */
  --font-display:'Unbounded', sans-serif;
  --font-body:'Inter', sans-serif;
}