/* ============================================================================
   SAFE SQUARE — primitives.css
   Spacing, radii, borders, shadows/elevation, motion. Load AFTER
   colors_and_type.css (shadows reference the ink ramp).
   ============================================================================ */
:root {
  /* --------------------------------------------------------------------------
     SPACING — 4px base unit. Compact, grid-disciplined (terminal density).
     -------------------------------------------------------------------------- */
  --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;

  --gutter:        24px;   /* default gap between UI elements */
  --section-y:     96px;   /* vertical rhythm between page sections */
  --container-max: 1200px;
  --container-pad: 24px;

  /* --------------------------------------------------------------------------
     RADII — restrained. Square-ish to echo the "SQUARE" name + terminal feel.
     Sharp corners on dense/terminal UI; gentle 8–12px on cards & controls.
     -------------------------------------------------------------------------- */
  --radius-0:   0px;       /* terminal windows, code blocks, tables */
  --radius-xs:  3px;       /* chips, tags, inline code */
  --radius-sm:  6px;       /* buttons, inputs */
  --radius-md:  8px;       /* cards */
  --radius-lg:  12px;      /* large panels, modals */
  --radius-pill:999px;     /* pills / status dots */

  /* --------------------------------------------------------------------------
     BORDERS — hairlines do the heavy lifting (flat aesthetic, low shadow).
     -------------------------------------------------------------------------- */
  --border-width:    1px;
  --border-width-2:  2px;  /* focus rings, active emphasis */
  --hairline:        1px solid var(--border);
  --hairline-faint:  1px solid var(--border-faint);
  --hairline-strong: 1px solid var(--border-strong);

  /* --------------------------------------------------------------------------
     ELEVATION / SHADOW — soft, low, cool. On the terminal surface shadows
     are nearly invisible; depth comes from borders + surface lightening.
     -------------------------------------------------------------------------- */
  --shadow-none:  none;
  --shadow-xs:    0 1px 2px rgba(11,12,14,0.05);
  --shadow-sm:    0 1px 3px rgba(11,12,14,0.06), 0 1px 2px rgba(11,12,14,0.04);
  --shadow-md:    0 4px 12px rgba(11,12,14,0.07), 0 2px 4px rgba(11,12,14,0.04);
  --shadow-lg:    0 12px 32px rgba(11,12,14,0.10), 0 4px 8px rgba(11,12,14,0.05);
  --shadow-pop:   0 16px 48px rgba(11,12,14,0.16);
  /* Accent focus ring */
  --ring:         0 0 0 3px color-mix(in oklab, var(--accent) 35%, transparent);
  /* Phosphor glow — terminal-only flourish for the prompt/accent */
  --glow-accent:  0 0 16px rgba(127,227,222,0.32);
  --glow-mint:    0 0 16px rgba(139,233,180,0.30);

  /* --------------------------------------------------------------------------
     MOTION — quick, mechanical, no bounce. Terminal = instant + crisp.
     -------------------------------------------------------------------------- */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);   /* default */
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --ease-linear:  linear;                            /* cursor blink, scans */
  --dur-instant:  90ms;
  --dur-fast:     150ms;
  --dur-base:     220ms;
  --dur-slow:     360ms;
  --transition:   all var(--dur-fast) var(--ease-out);

  /* Layering */
  --z-base: 0; --z-sticky: 100; --z-overlay: 500; --z-modal: 900; --z-toast: 1000;
}

/* Blink for terminal cursors / prompts (used sparingly) */
@keyframes ssq-blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
.ssq-caret {
  display:inline-block; width:0.55em; height:1.05em; transform:translateY(0.18em);
  background: var(--prompt); animation: ssq-blink 1.05s steps(1) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ssq-caret { animation: none; opacity: 1; }
}