/* ============================================================
   MEKORA — Shadows, motion, and signature industrial motifs
   (industrial redesign)
   Elevation is restrained and cool. No neon, no violet glow.
   Structure comes from hairlines, a blueprint grid, and ruler
   ticks — not from decoration.
   ============================================================ */
:root {
  /* Layered cool shadows — real depth, not flatness */
  --shadow-sm: 0 1px 2px rgba(11,14,18,0.06), 0 1px 1px rgba(11,14,18,0.04);
  --shadow-md: 0 4px 8px -3px rgba(11,14,18,0.09), 0 14px 28px -10px rgba(11,14,18,0.13);
  --shadow-lg: 0 10px 20px -8px rgba(11,14,18,0.12), 0 28px 52px -14px rgba(11,14,18,0.20);
  --shadow-xl: 0 40px 80px -20px rgba(11,14,18,0.26);

  /* Brand-surface lift for CTAs — neutral by strategy (no violet-tinted shadow).
     Token names retained; depth reads as cool graphite, matching --shadow-md/lg. */
  --shadow-brand:    0 8px 22px -8px rgba(11,14,18,0.22); /* @kind shadow */
  --shadow-brand-lg: 0 16px 38px -10px rgba(11,14,18,0.30); /* @kind shadow */
  --glow-violet:        0 10px 26px -12px rgba(11,14,18,0.55); /* @kind shadow */
  --glow-violet-soft:   0 8px 20px -12px rgba(0,0,0,0.5); /* @kind shadow */
  --glow-violet-strong: 0 14px 34px -12px rgba(11,14,18,0.6); /* @kind shadow */

  /* Focus ring — the one place violet still signals on controls */
  --focus-ring: 0 0 0 3px rgba(91,22,196,0.35); /* @kind shadow */

  /* Motion — precise, weighted, no bounce */
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 220ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */

  /* Signature geometry — flattened from the old marketing skew */
  --skew-cta: 0deg;               /* @kind other */ /* flattened — no more parallelograms */
  --hairline-accent: 2px;         /* @kind other */
  --hairline-w: 1px;              /* @kind other */

  /* Blueprint grid — replaces flowing gradient blobs */
  --grid-line: linear-gradient(var(--hairline) var(--hairline-w), transparent var(--hairline-w)),
               linear-gradient(90deg, var(--hairline) var(--hairline-w), transparent var(--hairline-w)); /* @kind other */
  --grid-size: 32px; /* @kind spacing */

  /* Ruler / registration ticks — replaces halftone dot fields */
  --tick-scale: repeating-linear-gradient(90deg, var(--neutral-300) 0 1px, transparent 1px 8px); /* @kind other */
  --dot-texture: radial-gradient(var(--neutral-300) 0.5px, transparent 0.6px); /* @kind other */
  --dot-size: 16px; /* @kind spacing */
}