/* Quiet Studio: design tokens
 * CSS custom properties used by components.css and motion.css.
 * Color/spacing/font-size primitives come from theme.json. This file adds the things theme.json cannot express: easing curves, durations, radii, hairline weights, and motion variables.
 */

:root {
  /* Easing curves (Emil Kowalski + Soft Skill) */
  --qs-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --qs-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --qs-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --qs-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Durations */
  --qs-dur-fast: 160ms;
  --qs-dur-base: 220ms;
  --qs-dur-slow: 420ms;
  --qs-dur-reveal: 800ms;

  /* Radii (squircle scale) */
  --qs-radius-sm: 0.5rem;
  --qs-radius-md: 0.875rem;
  --qs-radius-lg: 1.5rem;
  --qs-radius-xl: 2rem;
  --qs-radius-2xl: 2.5rem;
  --qs-radius-pill: 9999px;

  /* Inner radius helper for double-bezel: outer minus padding */
  --qs-radius-xl-inner: calc(var(--qs-radius-xl) - 0.375rem);
  --qs-radius-2xl-inner: calc(var(--qs-radius-2xl) - 0.5rem);

  /* Hairline weights */
  --qs-hairline: 1px solid var(--wp--preset--color--hairline);
  --qs-hairline-strong: 1px solid rgba(10, 10, 10, 0.12);

  /* Inner highlight (top edge sheen for nested cards) */
  --qs-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.65);

  /* Maximum content widths (extend theme.json layout) */
  --qs-content-narrow: 56ch;
  --qs-content-prose: 65ch;
}

/* Respect reduced motion globally */
@media (prefers-reduced-motion: reduce) {
  :root {
    --qs-dur-fast: 0ms;
    --qs-dur-base: 0ms;
    --qs-dur-slow: 0ms;
    --qs-dur-reveal: 0ms;
  }
}

/* Body base smoothing for premium feel */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
  font-variant-numeric: tabular-nums;
}

/* Selection color */
::selection {
  background: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
}

/* Focus ring (premium, accessible, never harsh) */
:where(a, button, .wp-block-button__link, input, textarea, select):focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--wp--preset--color--base), 0 0 0 4px var(--wp--preset--color--contrast);
  border-radius: var(--qs-radius-sm);
}