/* ============================================================
   CLARE — EFFECTS: radius, borders, shadow, motion (manual v01)
   Esquinas RECTAS (sin border-radius en componentes). Hairlines de 1px.
   Sombras suaves y amplias, nunca duras ni azuladas. Barra de acento 2px.
   ============================================================ */
:root {
  /* ---- Corner radius ----
     Manual v01: componentes con esquinas rectas (radius 0).
     Los tokens xs–lg quedan disponibles solo para usos no-componente
     (no aplicar a botones, tarjetas, swatches, chips). ---- */
  --radius-none: 0;
  --radius-card: 0;     /* tarjetas — rectas */
  --radius-control: 0;  /* botones / inputs / chips — rectos */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-pill: 999px; /* legado — no usar en componentes de marca */

  /* ---- Borders ---- */
  --border-hair:   1px solid var(--line);
  --border-strong: 1px solid var(--line-strong);
  --border-ink:    1px solid var(--text-strong);
  --border-accent: 2px solid var(--accent);  /* barra izq. en bloques destacados */

  /* ---- Shadows — warm, low, never bluish ---- */
  --shadow-none: none;
  --shadow-sm:   0 1px 2px rgba(28, 26, 23, 0.06);
  --shadow-md:   0 4px 16px rgba(28, 26, 23, 0.08);
  --shadow-lg:   0 16px 40px rgba(28, 26, 23, 0.12);
  --shadow-tooltip: 0 10px 30px rgba(0, 0, 0, 0.28);  /* tooltips / popovers */
  --shadow-xl:   0 40px 80px rgba(0, 0, 0, 0.40);     /* canvas principal / hero */

  /* ---- Focus ring (amarillo) ---- */
  --focus-ring: 0 0 0 3px var(--amarillo-tint-20);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.3, 1);    /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);   /* @kind other */
  --dur-fast:    0.18s; /* @kind other */
  --dur-base:    0.28s; /* @kind other */
  --dur-slow:    0.45s; /* @kind other */
  --transition-color: color var(--dur-fast) ease, background-color var(--dur-fast) ease, border-color var(--dur-fast) ease; /* @kind other */
}