/* ============================================================
   Eurekant — Radius & elevation tokens
   Radii: component scale (control/card) + website ui-styles
   scale (small 24 / medium 32 / large 40). Shadows: Relume scale.
   ============================================================ */

:root {
  /* ---- Radii ---- */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:   12px;   /* buttons, inputs, chips */
  --radius-lg:   16px;
  --radius-card: 24px;   /* = ui-styles small */
  --radius-panel:32px;   /* = ui-styles medium */
  --radius-xl:   40px;   /* = ui-styles large, hero media */
  --radius-pill: 999px;
  --radius-full: 50%;

  /* ---- Elevation (Relume light scale) ---- */
  --shadow-xxs: 0 1px 2px #0000000d;
  --shadow-xs:  0 1px 3px #0000001a, 0 1px 2px #0000000f;
  --shadow-sm:  0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;
  --shadow-md:  0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d;
  --shadow-lg:  0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a;
  --shadow-xl:  0 24px 48px -12px #0000002e;
  --shadow-xxl: 0 32px 64px -12px #00000024;

  /* ---- Brand-tinted glow (use sparingly on accent surfaces) ---- */
  --shadow-brand: 0 12px 32px -8px #137dc540;

  /* ---- Focus ring ---- */
  --ring-focus: 0 0 0 3px #2199ea4d;

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast: 0.15s; /* @kind other */
  --dur-base: 0.2s; /* @kind other */
  --dur-slow: 0.35s; /* @kind other */

  /* ---- Blur (frosted secondary surfaces) ---- */
  --blur-frost: 10px; /* @kind other */
}

/* Dark scheme: deeper shadow scale + picton glow focus ring */
[data-theme="dark"] {
  --shadow-xxs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-xs:  0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-sm:  0 4px 10px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.35);
  --shadow-md:  0 4px 10px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.35);
  --shadow-lg:  0 12px 24px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.4);
  --shadow-xl:  0 24px 48px rgba(0,0,0,0.7), 0 8px 16px rgba(0,0,0,0.5);
  --shadow-xxl: 0 24px 48px rgba(0,0,0,0.7), 0 8px 16px rgba(0,0,0,0.5);
  --shadow-brand: 0 0 0 4px rgba(33,153,234,0.35);  /* glow */
  --ring-focus: 0 0 0 4px rgba(33,153,234,0.35);    /* glow */
}