/* Keiko Eyewear — Spacing, Radius, Shadow, Layout, Motion Tokens */

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

  /* ----- Section rhythm ----- */
  --section-y: clamp(4rem, 2rem + 7vw, 8rem); /* @kind spacing */
  --gutter:    clamp(1.25rem, 0.5rem + 3vw, 3rem); /* @kind spacing */
  --maxw:      1280px;
  --maxw-prose: 68ch;

  /* ----- Radii (soft rounded corners on cards) ----- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;    /* default card */
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* ----- Border widths ----- */
  --bw-1: 1px;
  --bw-2: 2px;
  --bw-3: 3px;

  /* ----- Shadows — soft, warm, low-spread (premium, not harsh) ----- */
  --shadow-xs: 0 1px 2px rgba(16, 66, 72, 0.06);
  --shadow-sm: 0 2px 8px rgba(16, 66, 72, 0.08);
  --shadow-md: 0 10px 30px -8px rgba(16, 66, 72, 0.16);
  --shadow-lg: 0 24px 60px -16px rgba(16, 66, 72, 0.24);
  --shadow-gold: 0 10px 28px -8px rgba(184, 154, 46, 0.45);

  /* ----- Motion ----- */
  --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-soft: cubic-bezier(0.4, 0, 0.2, 1);     /* @kind other */
  --dur-fast: 140ms;   /* @kind other */
  --dur-base: 240ms;   /* @kind other */
  --dur-slow: 480ms;   /* @kind other */

  /* ----- Chevron motif geometry (KK isotipo) ----- */
  --chevron-clip: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 45% 50%); /* @kind other */
}