/* ============================================================
   combo.codes — Spacing, radii, borders, shadows, motion
   Terminal-sharp: tight radii, flat surfaces, the ECHO is the
   signature "shadow". No soft glows on brand marks; UI may glow code.
   ============================================================ */

:root {
  /* ---- Spacing scale (4px base grid) ------------------------------ */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* ---- Radii (sharp / terminal) ----------------------------------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-pill: 999px;

  /* ---- Border widths ---------------------------------------------- */
  --border-hairline: 1px;
  --border-thick:    2px;

  /* ---- The ECHO (signature identity move) ------------------------- *
   * Flat duplicate shifted right-down ~8% of font size. Never blurred. *
   * Under white text the echo is always purple.                        */
  --echo-offset: 0.08em;
  --echo-color:  var(--pulse-purple);
  /* drop-in text-shadow for headings on dark */
  --echo-shadow: var(--echo-offset) var(--echo-offset) 0 var(--echo-color);

  /* ---- Elevation ladder (border-as-elevation) --------------------- *
   * Depth is communicated by border weight + colour, not shadow stacks.*
   * 0 flat → 1 contained → 2 emphasized → accent = "powered on".       */
  --elev-0: none;
  --elev-1: 1px solid var(--border-subtle);
  --elev-2: 1px solid var(--border-default);
  --elev-3: 2px solid var(--border-strong);
  --elev-accent: 2px solid var(--acid-lime);
  /* blueprint borders for workflow / diagram containers */
  --border-blueprint: 1px dashed rgba(168, 85, 247, 0.35); /* @kind other */

  /* ---- Shadows (used sparingly — minimal visual noise) ------------ */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.50);
  --shadow-3: 0 18px 50px rgba(0, 0, 0, 0.55);

  /* ---- Focus / accent glows (allowed in UI, code, CTAs) ----------- */
  --ring-lime:   0 0 0 2px var(--void), 0 0 0 4px var(--acid-lime);
  --ring-purple: 0 0 0 2px var(--void), 0 0 0 4px var(--pulse-purple);
  --glow-lime:   0 0 18px rgba(200, 255, 46, 0.30);
  --glow-purple: 0 0 18px rgba(168, 85, 247, 0.35);
  --glow-magenta:0 0 18px rgba(255, 46, 136, 0.35);

  /* ---- Motion ----------------------------------------------------- *
   * Snappy, mechanical. Step-end for "typed" feels; ease-out for slides.*/
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);    /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* @kind other */
  --ease-pop:    cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:    120ms;  /* @kind other */
  --dur-base:    200ms;  /* @kind other */
  --dur-slow:    400ms;  /* @kind other */

  /* ---- Layout ----------------------------------------------------- */
  --container:      1200px;
  --container-wide: 1440px;
  --container-text: 720px;   /* readable measure for body copy */
}