/* ============================================================
   SWORN — Effects & Foundations Tokens
   Radius, elevation/shadow, opacity, blur, z-index, motion,
   icon sizing, stroke, borders, focus.
   Restrained by design: shadows are soft and warm-tinted,
   motion is short and precise.
   ============================================================ */

:root {
  /* ---- Border radius ---- */
  --radius-none: 0;
  --radius-xs:   3px;
  --radius-sm:   5px;    /* inputs, tags, small controls        */
  --radius-md:   8px;    /* buttons, cards                      */
  --radius-lg:   12px;   /* panels, dialogs                     */
  --radius-xl:   18px;   /* feature cards, hero surfaces        */
  --radius-2xl:  28px;
  --radius-full: 999px;  /* pills, avatars, switches            */

  /* ---- Border widths ---- */
  --border-thin:   1px;
  --border-medium: 1.5px;
  --border-thick:  2px;

  /* ---- Elevation / shadows (warm-tinted, low-spread) ------- */
  /* Shadow color is a translucent espresso, never pure black.  */
  --shadow-color:  38 30 25;   /* rgb of --ink-950-ish          */
  --shadow-xs:  0 1px 2px rgba(var(--shadow-color) / 0.05);
  --shadow-sm:  0 1px 3px rgba(var(--shadow-color) / 0.06),
                0 1px 2px rgba(var(--shadow-color) / 0.04);
  --shadow-md:  0 2px 4px rgba(var(--shadow-color) / 0.05),
                0 4px 12px rgba(var(--shadow-color) / 0.07);
  --shadow-lg:  0 4px 8px rgba(var(--shadow-color) / 0.05),
                0 12px 28px rgba(var(--shadow-color) / 0.09);
  --shadow-xl:  0 8px 16px rgba(var(--shadow-color) / 0.06),
                0 24px 56px rgba(var(--shadow-color) / 0.12);
  /* Inner well for sunken protocol readouts */
  --shadow-inset: inset 0 1px 2px rgba(var(--shadow-color) / 0.07);
  /* Hairline ring that pairs with a shadow (crisp card edge) */
  --ring-hairline: 0 0 0 1px rgba(var(--shadow-color) / 0.06);

  /* ---- Opacity scale ---- */
  --opacity-0:    0;      /* @kind other */
  --opacity-8:    0.08;   /* @kind other */
  --opacity-16:   0.16;   /* @kind other */
  --opacity-40:   0.4;    /* @kind other */
  --opacity-64:   0.64;   /* @kind other */
  --opacity-100:  1;      /* @kind other */

  /* ---- Blur ---- */
  --blur-sm:  8px;   /* @kind other */
  --blur-md:  16px;  /* @kind other */
  --blur-lg:  32px;  /* @kind other */
  --backdrop: saturate(120%) blur(var(--blur-md));   /* @kind other */

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

  /* ---- Motion: durations ---- */
  --duration-instant: 80ms;   /* @kind other */  --duration-fast:    140ms;  /* @kind other */
  --duration-base:    220ms;  /* @kind other */
  --duration-slow:    360ms;  /* @kind other */
  --duration-slower:  560ms;  /* @kind other */

  /* ---- Motion: easing ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);      /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);   /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);      /* @kind other */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);  /* @kind other */
  /* No spring/bounce — motion is deterministic, never playful.  */

  /* ---- Icon sizing ---- */
  --icon-xs: 14px;   /* @kind other */
  --icon-sm: 16px;   /* @kind other */
  --icon-md: 20px;   /* @kind other */
  --icon-lg: 24px;   /* @kind other */
  --icon-xl: 32px;   /* @kind other */
  --icon-stroke: 1.5;   /* @kind other */

  /* ---- Focus ---- */
  --focus-width:  2px;   /* @kind other */
  --focus-offset: 2px;   /* @kind other */
  --focus-shadow: 0 0 0 var(--focus-offset) var(--focus-ring-offset),
                  0 0 0 calc(var(--focus-offset) + var(--focus-width)) var(--focus-ring);
}

/* ---- Standard focus-visible treatment ---- */
.focusable:focus-visible,
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus-shadow);
  border-radius: var(--radius-sm);
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}