/* ============================================================
   Planeta 4x4 — Effects: radii, borders, shadows, motion
   Aesthetic: squared & precise (the logo is angular). Corners
   stay small. Shadows are minimal — depth comes from dark
   surfaces, borders and negative space, not heavy elevation.
   ============================================================ */
:root {
  /* Corner radii — mostly sharp */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;
  --radius-circle: 50%;

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

  /* Shadows — quiet, cool-neutral */
  --shadow-xs: 0 1px 2px rgba(11, 30, 19, 0.06);
  --shadow-sm: 0 2px 8px rgba(11, 30, 19, 0.08);
  --shadow-md: 0 10px 30px rgba(11, 30, 19, 0.12);
  --shadow-lg: 0 24px 60px rgba(11, 30, 19, 0.18);

  /* Image protection gradient (text over photos) */
  --scrim-bottom: linear-gradient(to top, rgba(11,30,19,0.85) 0%, rgba(11,30,19,0.45) 40%, rgba(11,30,19,0) 100%); /* @kind other */
  --scrim-full:   linear-gradient(to top, rgba(11,30,19,0.80) 0%, rgba(11,30,19,0.20) 60%, rgba(11,30,19,0.05) 100%); /* @kind other */

  /* Motion — restrained, confident easing (no bounce) */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast: 140ms; /* @kind other */
  --dur-base: 240ms; /* @kind other */
  --dur-slow: 480ms; /* @kind other */
}