/* F2 Technologies — Radii, borders & motion
 * Color/theme tokens live in colors.css; these are the non-color foundations
 * the component layer references. Elevation is expressed with surface-color
 * steps and hairline borders, NOT shadows. No glows, no decorative drop shadows. */
:root {
  /* Corner radii — the rounded-square language (v1.1) */
  --f2-radius-sm:      4px;   /* module cell           */
  --f2-radius-control: 10px;  /* buttons / inputs      */
  --f2-radius-md:      14px;  /* cards                 */
  --f2-radius-lg:      20px;  /* app tile / keycap     */
  --f2-radius-pill:    999px;

  /* Borders — hairlines carry separation */
  --f2-border-width: 1px;
  --f2-border-hairline: 1px solid var(--f2-border);

  /* The single permitted elevation: a tight, near-flat lift for menus/dialogs
     only. Use surface steps first; reach for this sparingly. */
  --f2-elevation-overlay: 0 8px 28px rgba(11, 13, 17, 0.45);

  /* Focus ring — built on the accent TEXT role (AA on both themes) */
  --f2-ring: 0 0 0 2px var(--f2-surface), 0 0 0 4px var(--f2-accent-text);

  /* ---- Motion ---- */
  --f2-ease:     cubic-bezier(0.2, 0, 0, 1); /* @kind other */
  --f2-dur-fast: 120ms; /* @kind other */
  --f2-dur-base: 220ms; /* @kind other */
  --f2-dur-slow: 420ms; /* @kind other */
}

/* Respect reduced-motion: zero out durations (consumers read these) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --f2-dur-fast: 0ms; /* @kind other */
    --f2-dur-base: 0ms; /* @kind other */
    --f2-dur-slow: 0ms; /* @kind other */
  }
}