/* ============================================================
   Jan Homeyer — Spacing, Radii, Shadow, Layout & Motion
   Minimalist editorial: an 8px-based scale, restrained radii,
   barely-there shadows (galleries use hairlines, not drop
   shadows), and calm, slow motion.
   ============================================================ */

:root {
  /* ---- Spacing scale (8px base, with 4px half-steps) ---- */
  --space-0:    0;
  --space-1:    0.25rem;   /* 4px  */
  --space-2:    0.5rem;    /* 8px  */
  --space-3:    0.75rem;   /* 12px */
  --space-4:    1rem;      /* 16px */
  --space-5:    1.5rem;    /* 24px */
  --space-6:    2rem;      /* 32px */
  --space-7:    3rem;      /* 48px */
  --space-8:    4rem;      /* 64px */
  --space-9:    6rem;      /* 96px */
  --space-10:   8rem;      /* 128px */
  --space-11:   12rem;     /* 192px */

  /* ---- Radii (subtle — corners option 1) ---- */
  --radius-none:  0;
  --radius-xs:    3px;
  --radius-sm:    6px;     /* default — buttons, inputs, tags */
  --radius-md:    10px;    /* cards                            */
  --radius-lg:    16px;    /* large surfaces                   */
  --radius-pill:  999px;
  --radius-circle: 50%;

  /* ---- Borders ---- */
  --border-width:       1px;
  --border-width-thick: 2px;

  /* ---- Shadows (whisper-quiet; gallery aesthetic) ---- */
  --shadow-none:  none;
  --shadow-xs:    0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-sm:    0 1px 3px rgba(26, 26, 26, 0.05),
                  0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-md:    0 4px 16px rgba(26, 26, 26, 0.06),
                  0 1px 3px rgba(26, 26, 26, 0.05);
  --shadow-lg:    0 12px 40px rgba(26, 26, 26, 0.09),
                  0 2px 8px rgba(26, 26, 26, 0.05);
  --shadow-focus: 0 0 0 3px rgba(58, 54, 191, 0.28);

  /* ---- Layout ---- */
  --container-sm:   640px;
  --container-md:   880px;
  --container-lg:   1200px;
  --container-xl:   1440px;
  --container-full: 100%;
  --gutter:         clamp(1.25rem, 5vw, 4rem); /* @kind spacing */
  --header-height:  72px;

  /* ---- Z-index ---- */
  --z-base:     0;   /* @kind other */
  --z-raised:   10;  /* @kind other */
  --z-sticky:   100; /* @kind other */
  --z-overlay:  1000; /* @kind other */
  --z-modal:    1100; /* @kind other */
  --z-toast:    1200; /* @kind other */

  /* ---- Motion ---- (calm, editorial — slow & soft) */
  --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 */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);     /* @kind other */
  --duration-fast:   140ms;  /* @kind other */
  --duration-base:   240ms;  /* @kind other */
  --duration-slow:   420ms;  /* @kind other */
  --duration-slower: 720ms;  /* @kind other */

  /* Hover/press conventions
     hover  → lift opacity / soft shadow, color shifts to *-soft
     press  → 0.98 scale + remove lift
     focus  → --shadow-focus ring                              */
  --press-scale: 0.98;       /* @kind other */
  --hover-lift:  translateY(-2px); /* @kind other */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms; /* @kind other */
    --duration-base: 0ms; /* @kind other */
    --duration-slow: 0ms; /* @kind other */
    --duration-slower: 0ms; /* @kind other */
  }
}