/* ============================================================
   DP TRAINING — ELEVATION, SHADOW & EFFECT TOKENS
   On dark surfaces, depth reads through borders + a white halo,
   not soft drop shadows. On light surfaces, crisp neutral
   shadows. No chroma anywhere: the identity is monochrome.
   ============================================================ */

:root {
  /* Neutral shadows (best on light surfaces) */
  --shadow-sm:  0 1px 2px rgba(10, 10, 10, 0.12);
  --shadow-md:  0 6px 18px rgba(10, 10, 10, 0.14);
  --shadow-lg:  0 18px 44px rgba(10, 10, 10, 0.20);
  --shadow-xl:  0 32px 80px rgba(10, 10, 10, 0.28);

  /* Dark-surface elevation — deeper, tighter */
  --shadow-dark-md: 0 8px 28px rgba(0, 0, 0, 0.55);
  --shadow-dark-lg: 0 24px 64px rgba(0, 0, 0, 0.6);

  /* Brand halo — the signature on dark. A lit edge, not a colour
     bloom: the ring carries the emphasis, the spread stays faint. */
  --glow-brand-sm: 0 0 0 1px rgba(var(--brand-rgb) / 0.30),
                   0 4px 18px rgba(var(--brand-rgb) / 0.06);
  --glow-brand-md: 0 0 0 1px rgba(var(--brand-rgb) / 0.45),
                   0 8px 32px rgba(var(--brand-rgb) / 0.10);
  --glow-brand-lg: 0 0 0 1px rgba(var(--brand-rgb) / 0.55),
                   0 10px 50px rgba(var(--brand-rgb) / 0.14);

  /* Focus ring */
  --ring-focus: 0 0 0 3px rgba(var(--brand-rgb) / 0.55);

  /* Inset highlight for "machined" raised controls on dark */
  --inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.10);

  /* ---- Gradients ----------------------------------------- */
  /* Brand action gradient — the white slab with a vertical sheen */
  --grad-brand: linear-gradient(180deg, var(--white) 0%, var(--ink-100) 100%);
  /* Hero wash — a raking light across industrial black */
  --grad-hero: radial-gradient(120% 90% at 80% -10%, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0) 55%), linear-gradient(180deg, #131313 0%, var(--ink-950) 70%);
  /* Image protection scrim — bottom-up black for text over photos */
  --grad-scrim: linear-gradient(0deg, rgba(8, 8, 8, 0.92) 0%, rgba(8, 8, 8, 0.55) 38%, rgba(8, 8, 8, 0) 100%); /* @kind color */
  /* Top scrim for nav over imagery */
  --grad-scrim-top: linear-gradient(180deg, rgba(8, 8, 8, 0.7) 0%, rgba(8, 8, 8, 0) 100%); /* @kind color */

  /* Blur for glass overlays / sticky nav. No saturate boost —
     there is no chroma to lift, and it only greys the blacks. */
  --blur-glass: blur(14px); /* @kind other */

  /* Texture opacity (grain/diagonal lines overlay) */
  --texture-opacity: 0.05; /* @kind other */
}