/* ============================================================
   Nolab — Spacing, radius, shadow, motion tokens
   (Brand Guidelines v1.0 §8.2 spacing, §8.3 radius, §8.4 shadow)
   Generous, editorial white space. Restrained, mostly-sharp radii.
   ============================================================ */

:root {
  /* ---- Spacing scale (§8.2) ----
     Microespacios: 4–8 · Entre elementos: 12–24 ·
     Entre secciones: 32–80 · Márgenes: 120–200 */
  --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-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-30: 120px;
  --space-40: 160px;
  --space-50: 200px;

  /* ---- Border radius (§8.3) ----
     Sharp, editorial. Buttons & images are square. */
  --radius-none: 0;        /* images · primary buttons */
  --radius-sm: 4px;        /* inputs · cards · CTA */
  --radius-md: 8px;        /* cards */
  --radius-lg: 16px;       /* special cards */
  --radius-cta: 20px;      /* pill inputs · rounded CTA */
  --radius-full: 999px;    /* pills · tags · status */

  /* ---- Shadow (§8.4) — three elevation tiers ----
     Soft Surface (cards) · Elevated (menus/dropdowns) · Overlay (modals).
     Cool, low-spread — never harsh black. */
  --shadow-xs: 0 1px 2px rgba(18, 23, 27, 0.05);
  --shadow-sm: 0 2px 8px rgba(18, 23, 27, 0.06);      /* Soft Surface */
  --shadow-md: 0 10px 30px rgba(18, 23, 27, 0.10);    /* Elevated Surface */
  --shadow-lg: 0 24px 60px rgba(18, 23, 27, 0.16);    /* Overlay */
  --shadow-xl: 0 36px 90px rgba(18, 23, 27, 0.20);
  --shadow-focus: 0 0 0 3px rgba(58, 47, 242, 0.26);

  /* ---- Glass / Soft — frosted material for pills & overlays over photography.
     White 12% fill · 24px backdrop blur · 1px White 18% border ·
     Shadow 01 (Soft Surface) · fully-rounded. Apply all five together. */
  --glass-soft-bg: rgba(255, 255, 255, 0.12);
  --glass-soft-blur: blur(24px) saturate(150%);   /* @kind other */
  --glass-soft-border: 1px solid rgba(255, 255, 255, 0.18); /* @kind other */
  --glass-soft-shadow: var(--shadow-sm);
  --glass-soft-radius: var(--radius-full);

  /* ---- Glass / Status — frosted Status Pill that sits over photography.
     Dark charcoal material per the Nolab website: Charcoal 32% fill, 6px
     backdrop blur, 1px warm-white 16% border, fully-rounded. White text. */
  --glass-status-bg: rgba(20, 25, 30, 0.32);
  --glass-status-blur: blur(6px);                /* @kind other */
  --glass-status-border: 1px solid rgba(217, 215, 210, 0.16); /* @kind other */
  --glass-status-radius: var(--radius-full);

  /* Layout */
  --container-max: 1240px;
  --container-wide: 1440px;
  --gutter: var(--space-8);

  /* Motion — calm, editorial, paused rhythm. No bounce. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);    /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --duration-fast: 140ms;  /* @kind other */
  --duration-base: 260ms;  /* @kind other */
  --duration-slow: 480ms;  /* @kind other */
}