/* ============================================================
   PYRATZ CORP - EFFECTS: radii, borders, shadows, motion
   Institutional restraint: small radii, hairline borders,
   barely-there shadows, quick confident easing.
   ============================================================ */

:root {
  /* ---- Corner radii ---- */
  --radius-xs:   5px;   /* tags, mono pills corners       */
  --radius-sm:   6px;   /* buttons, inputs                */
  --radius-md:   7px;   /* primary buttons                */
  --radius-lg:   10px;  /* badges, small panels           */
  --radius-xl:   12px;  /* cards                          */
  --radius-pill: 999px; /* category chips                 */

  /* ---- Border widths ---- */
  --border-hair: 1px;
  --rule-accent-w: 2px;  /* the short accent kicker rule  */
  --rule-accent-len: 24px;

  /* ---- Shadows ----
     Dark world barely uses shadow; depth comes from hairlines
     and tinted fills. Reserve real shadow for light/Paper. */
  --shadow-none:  none;
  --shadow-card:  0 1px 0 rgba(232,236,241,0.03) inset;
  --shadow-glow:  0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
  /* Glass panels lift off the blue base with a soft deep-blue drop */
  --shadow-glass: 0 20px 50px rgba(7,16,28,0.45);
  --shadow-glass-sm: 0 8px 24px rgba(7,16,28,0.35);
  /* On light, cards lift with a soft INK-TINTED shadow (never pure grey).
     Primary depth on light is flat tinted steps + hairlines; reserve these
     for genuinely floating elements (consoles, modals, hovered cards). */
  --shadow-ink-sm: 0 1px 2px rgba(14,30,48,0.06);
  --shadow-ink-md: 0 12px 36px rgba(14,30,48,0.12);
  --shadow-ink-lg: 0 30px 70px rgba(14,30,48,0.14);
  /* legacy paper aliases */
  --shadow-paper-sm: var(--shadow-ink-sm);
  --shadow-paper-md: var(--shadow-ink-md);

  /* ---- Hero ambience ----
     The modern glass-mesh: a soft aqua glow top-right + a blue glow
     bottom-left over the deep base. Use as a full background. */
  --glow-accent: radial-gradient(1100px 520px at 80% -10%,
                  color-mix(in srgb, var(--accent) 18%, transparent), transparent 58%);
  --glow-signal: radial-gradient(820px 460px at 4% 116%,
                  rgba(91,140,255,0.16), transparent 60%); /* @kind other */
  --mesh-hero: radial-gradient(1300px 760px at 80% -14%, rgba(60,223,196,0.20), transparent 56%),
               radial-gradient(1100px 700px at 12% 122%, rgba(43,71,176,0.44), transparent 60%),
               radial-gradient(820px 560px at 50% 56%, rgba(91,140,255,0.13), transparent 70%),
               linear-gradient(166deg, #0C1A3E 0%, #0A1430 46%, #070D1C 100%); /* @kind other */
  /* Light mesh: a whisper of aqua/blue over cool white, for light heroes. */
  --mesh-light: radial-gradient(1100px 560px at 82% -10%, rgba(15,178,149,0.07), transparent 56%),
                radial-gradient(820px 480px at 2% 116%, rgba(91,140,255,0.06), transparent 60%),
                linear-gradient(160deg, #F6F9FC 0%, #ECF1F6 100%); /* @kind other */
  /* Signature "gradient-dark-transparent" veil - layer over a mesh/imagery
     to anchor content and add depth (top for nav, bottom for footers). */
  --gradient-veil: linear-gradient(180deg, transparent 52%, rgba(7,13,28,0.78) 100%); /* @kind other */
  --gradient-veil-top: linear-gradient(180deg, rgba(7,13,28,0.70), transparent); /* @kind other */

  /* ---- Motion ----
     Confident and quick. Short fades and subtle lifts; no bounce. */
  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   320ms; /* @kind other */
}