@lindaui/tokens 0.2.1 → 0.3.0

package/dist/index.css

@@ -247,15 +247,9 @@
   .top-0 {
     top: 0;
   }
-  .top-3 {
-    top: calc(var(--spacing) * 3);
-  }
   .top-4 {
     top: calc(var(--spacing) * 4);
   }
-  .right-3 {
-    right: calc(var(--spacing) * 3);
-  }
   .right-4 {
     right: calc(var(--spacing) * 4);
   }
@@ -283,9 +277,6 @@
   .z-\[60\] {
     z-index: 60;
   }
-  .col-span-12 {
-    grid-column: span 12 / span 12;
-  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -337,9 +328,6 @@
   .mt-10 {
     margin-top: calc(var(--spacing) * 10);
   }
-  .mt-auto {
-    margin-top: auto;
-  }
   .-mr-1 {
     margin-right: calc(var(--spacing) * -1);
   }
@@ -382,9 +370,6 @@
   .table {
     display: table;
   }
-  .aspect-square {
-    aspect-ratio: 1 / 1;
-  }
   .aspect-video {
     aspect-ratio: var(--aspect-video);
   }
@@ -396,18 +381,6 @@
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }
-  .size-5 {
-    width: calc(var(--spacing) * 5);
-    height: calc(var(--spacing) * 5);
-  }
-  .size-6 {
-    width: calc(var(--spacing) * 6);
-    height: calc(var(--spacing) * 6);
-  }
-  .size-8 {
-    width: calc(var(--spacing) * 8);
-    height: calc(var(--spacing) * 8);
-  }
   .size-11 {
     width: calc(var(--spacing) * 11);
     height: calc(var(--spacing) * 11);
@@ -454,12 +427,6 @@
   .h-16 {
     height: calc(var(--spacing) * 16);
   }
-  .h-24 {
-    height: calc(var(--spacing) * 24);
-  }
-  .h-64 {
-    height: calc(var(--spacing) * 64);
-  }
   .h-\[17px\] {
     height: 17px;
   }
@@ -472,24 +439,9 @@
   .h-\[132px\] {
     height: 132px;
   }
-  .h-\[140px\] {
-    height: 140px;
-  }
-  .h-\[400px\] {
-    height: 400px;
-  }
-  .h-\[480px\] {
-    height: 480px;
-  }
-  .h-\[600px\] {
-    height: 600px;
-  }
   .h-full {
     height: 100%;
   }
-  .h-screen {
-    height: 100vh;
-  }
   .max-h-\[65\%\] {
     max-height: 65%;
   }
@@ -505,9 +457,6 @@
   .min-h-\[72px\] {
     min-height: 72px;
   }
-  .min-h-\[200px\] {
-    min-height: 200px;
-  }
   .min-h-dvh {
     min-height: 100dvh;
   }
@@ -562,12 +511,6 @@
   .w-36 {
     width: calc(var(--spacing) * 36);
   }
-  .w-48 {
-    width: calc(var(--spacing) * 48);
-  }
-  .w-72 {
-    width: calc(var(--spacing) * 72);
-  }
   .w-\[17px\] {
     width: 17px;
   }
@@ -580,54 +523,12 @@
   .w-\[132px\] {
     width: 132px;
   }
-  .w-\[200px\] {
-    width: 200px;
-  }
-  .w-\[260px\] {
-    width: 260px;
-  }
-  .w-\[280px\] {
-    width: 280px;
-  }
-  .w-\[320px\] {
-    width: 320px;
-  }
-  .w-\[360px\] {
-    width: 360px;
-  }
-  .w-\[380px\] {
-    width: 380px;
-  }
-  .w-\[400px\] {
-    width: 400px;
-  }
-  .w-\[420px\] {
-    width: 420px;
-  }
-  .w-\[460px\] {
-    width: 460px;
-  }
-  .w-\[480px\] {
-    width: 480px;
-  }
-  .w-\[520px\] {
-    width: 520px;
-  }
-  .w-\[560px\] {
-    width: 560px;
-  }
-  .w-\[600px\] {
-    width: 600px;
-  }
   .w-full {
     width: 100%;
   }
   .max-w-2xl {
     max-width: var(--container-2xl);
   }
-  .max-w-\[240px\] {
-    max-width: 240px;
-  }
   .max-w-\[270px\] {
     max-width: 270px;
   }
@@ -658,6 +559,9 @@
   .min-w-\[8rem\] {
     min-width: 8rem;
   }
+  .min-w-\[240px\] {
+    min-width: 240px;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -667,12 +571,6 @@
   .shrink-0 {
     flex-shrink: 0;
   }
-  .scale-125 {
-    --tw-scale-x: 125%;
-    --tw-scale-y: 125%;
-    --tw-scale-z: 125%;
-    scale: var(--tw-scale-x) var(--tw-scale-y);
-  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -685,18 +583,12 @@
   .grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
-  .grid-cols-12 {
-    grid-template-columns: repeat(12, minmax(0, 1fr));
-  }
   .flex-col {
     flex-direction: column;
   }
   .flex-col-reverse {
     flex-direction: column-reverse;
   }
-  .flex-row {
-    flex-direction: row;
-  }
   .flex-wrap {
     flex-wrap: wrap;
   }
@@ -712,9 +604,6 @@
   .items-start {
     align-items: flex-start;
   }
-  .items-stretch {
-    align-items: stretch;
-  }
   .justify-between {
     justify-content: space-between;
   }
@@ -751,6 +640,13 @@
   .gap-\[3px\] {
     gap: 3px;
   }
+  .space-y-2 {
+    :where(& > :not(:last-child)) {
+      --tw-space-y-reverse: 0;
+      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
+      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
+    }
+  }
   .space-y-3 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -776,9 +672,6 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .overflow-auto {
-    overflow: auto;
-  }
   .overflow-hidden {
     overflow: hidden;
   }
@@ -791,9 +684,6 @@
   .rounded-2xl {
     border-radius: calc(var(--radius) * 1.8);
   }
-  .rounded-3xl {
-    border-radius: calc(var(--radius) * 2.2);
-  }
   .rounded-\[2px\] {
     border-radius: 2px;
   }
@@ -953,12 +843,6 @@
   .bg-viewer-bg {
     background-color: var(--viewer-bg);
   }
-  .bg-viewer-foreground\/12 {
-    background-color: var(--viewer-foreground);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--viewer-foreground) 12%, transparent);
-    }
-  }
   .bg-white {
     background-color: var(--color-white);
   }
@@ -992,15 +876,6 @@
   .object-contain {
     object-fit: contain;
   }
-  .object-cover {
-    object-fit: cover;
-  }
-  .p-1 {
-    padding: var(--spacing);
-  }
-  .p-2 {
-    padding: calc(var(--spacing) * 2);
-  }
   .p-3 {
     padding: calc(var(--spacing) * 3);
   }
@@ -1040,6 +915,9 @@
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
+  .px-5 {
+    padding-inline: calc(var(--spacing) * 5);
+  }
   .px-6 {
     padding-inline: calc(var(--spacing) * 6);
   }
@@ -1067,9 +945,6 @@
   .py-5 {
     padding-block: calc(var(--spacing) * 5);
   }
-  .py-12 {
-    padding-block: calc(var(--spacing) * 12);
-  }
   .py-16 {
     padding-block: calc(var(--spacing) * 16);
   }
@@ -1091,9 +966,6 @@
   .pr-3 {
     padding-right: calc(var(--spacing) * 3);
   }
-  .pr-8 {
-    padding-right: calc(var(--spacing) * 8);
-  }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
@@ -1159,9 +1031,6 @@
   .text-\[9px\] {
     font-size: 9px;
   }
-  .text-\[10px\] {
-    font-size: 10px;
-  }
   .text-\[11px\] {
     font-size: 11px;
   }
@@ -1174,10 +1043,6 @@
   .text-\[28px\] {
     font-size: 28px;
   }
-  .leading-none {
-    --tw-leading: 1;
-    line-height: 1;
-  }
   .leading-relaxed {
     --tw-leading: var(--leading-relaxed);
     line-height: var(--leading-relaxed);
@@ -1243,18 +1108,6 @@
   .text-background {
     color: var(--background);
   }
-  .text-black {
-    color: var(--color-black);
-  }
-  .text-black\/60 {
-    color: color-mix(in srgb, #000 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-black) 60%, transparent);
-    }
-  }
-  .text-chart-1 {
-    color: var(--chart-1);
-  }
   .text-danger {
     color: var(--danger);
   }
@@ -1267,9 +1120,6 @@
   .text-green-800 {
     color: var(--color-green-800);
   }
-  .text-muted {
-    color: var(--muted);
-  }
   .text-muted-foreground {
     color: var(--muted-foreground);
   }
@@ -1285,9 +1135,6 @@
   .text-primary {
     color: var(--primary);
   }
-  .text-primary-foreground {
-    color: var(--primary-foreground);
-  }
   .text-red-800 {
     color: var(--color-red-800);
   }
@@ -1309,9 +1156,6 @@
   .text-yellow-800 {
     color: var(--color-yellow-800);
   }
-  .capitalize {
-    text-transform: capitalize;
-  }
   .uppercase {
     text-transform: uppercase;
   }
@@ -1380,10 +1224,6 @@
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
   }
-  .select-none {
-    -webkit-user-select: none;
-    user-select: none;
-  }
   .hover\:bg-accent\/50 {
     &:hover {
       @media (hover: hover) {
@@ -1416,11 +1256,6 @@
       left: calc(var(--spacing) * 4);
     }
   }
-  .sm\:col-span-6 {
-    @media (width >= 40rem) {
-      grid-column: span 6 / span 6;
-    }
-  }
   .sm\:grid {
     @media (width >= 40rem) {
       display: grid;
@@ -1441,11 +1276,6 @@
       height: 108px;
     }
   }
-  .sm\:h-\[120px\] {
-    @media (width >= 40rem) {
-      height: 120px;
-    }
-  }
   .sm\:h-\[168px\] {
     @media (width >= 40rem) {
       height: 168px;
@@ -1471,11 +1301,6 @@
       width: 108px;
     }
   }
-  .sm\:w-\[120px\] {
-    @media (width >= 40rem) {
-      width: 120px;
-    }
-  }
   .sm\:w-\[168px\] {
     @media (width >= 40rem) {
       width: 168px;
@@ -1501,21 +1326,11 @@
       flex-direction: row;
     }
   }
-  .sm\:items-center {
-    @media (width >= 40rem) {
-      align-items: center;
-    }
-  }
   .sm\:items-start {
     @media (width >= 40rem) {
       align-items: flex-start;
     }
   }
-  .sm\:justify-between {
-    @media (width >= 40rem) {
-      justify-content: space-between;
-    }
-  }
   .sm\:justify-end {
     @media (width >= 40rem) {
       justify-content: flex-end;
@@ -1615,16 +1430,6 @@
       font-size: 46px;
     }
   }
-  .md\:max-w-\[136px\] {
-    @media (width >= 48rem) {
-      max-width: 136px;
-    }
-  }
-  .md\:flex-row {
-    @media (width >= 48rem) {
-      flex-direction: row;
-    }
-  }
   .lg\:mt-6 {
     @media (width >= 64rem) {
       margin-top: calc(var(--spacing) * 6);
@@ -12976,21 +12781,6 @@
 .ti-fade {
   animation: ti-fade 0.25s ease both;
 }
-@property --tw-scale-x {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-scale-y {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
-@property --tw-scale-z {
-  syntax: "*";
-  inherits: false;
-  initial-value: 1;
-}
 @property --tw-rotate-x {
   syntax: "*";
   inherits: false;
@@ -13241,6 +13031,21 @@
   inherits: false;
   initial-value: 0;
 }
+@property --tw-scale-x {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-y {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
+@property --tw-scale-z {
+  syntax: "*";
+  inherits: false;
+  initial-value: 1;
+}
 @property --tw-outline-style {
   syntax: "*";
   inherits: false;
@@ -13355,9 +13160,6 @@
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
-      --tw-scale-x: 1;
-      --tw-scale-y: 1;
-      --tw-scale-z: 1;
       --tw-rotate-x: initial;
       --tw-rotate-y: initial;
       --tw-rotate-z: initial;
@@ -13432,6 +13234,9 @@
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
+      --tw-scale-x: 1;
+      --tw-scale-y: 1;
+      --tw-scale-z: 1;
       --tw-outline-style: solid;
       --tw-border-spacing-x: 0;
       --tw-border-spacing-y: 0;

package/llms.txt

@@ -79,6 +79,9 @@ Toggle with `document.documentElement.dataset.theme = "ocean"` + the `.dark` cla
 ## Exports & notes for agents
 
 - `@lindaui/tokens/css` → the compiled stylesheet (the only thing you import for runtime).
+- `@lindaui/tokens/theme.css` → the raw theme source (tokens + `@theme inline`). Only for
+  apps that run their own Tailwind pass and need the custom utilities to resolve there too;
+  normal consumers never import this.
 - `@lindaui/tokens/theme-template.css` → commented theme template to copy (not imported).
 - No JS entry point. `@lindaui/ui` and `@lindaui/blocks` declare this as a peer.
 - If a layout looks unstyled ("just text"), the consumer usually forgot the `/css` import.

package/package.json

@@ -1,9 +1,20 @@
 {
   "name": "@lindaui/tokens",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Brand design tokens (OKLCH light/dark) + HeroUI v3 + Tailwind v4 compiled into a single CSS bundle.",
   "author": "Franco Carballar <francocarballar@gmail.com>",
   "license": "MIT",
+  "homepage": "https://github.com/francocarballar/lindaui#readme",
+  "bugs": {
+    "url": "https://github.com/francocarballar/lindaui/issues"
+  },
+  "keywords": [
+    "design-tokens",
+    "css",
+    "tailwindcss",
+    "oklch",
+    "theme"
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/francocarballar/lindaui.git",
@@ -15,15 +26,21 @@
   "type": "module",
   "exports": {
     "./css": "./dist/index.css",
-    "./theme-template.css": "./theme-template.css"
+    "./theme.css": "./src/theme.css",
+    "./theme-template.css": "./theme-template.css",
+    "./package.json": "./package.json"
   },
   "files": [
     "dist",
+    "src/theme.css",
     "LICENSE",
     "README.md",
     "llms.txt",
     "theme-template.css"
   ],
+  "sideEffects": [
+    "*.css"
+  ],
   "devDependencies": {
     "tailwindcss": "^4.0.0",
     "@tailwindcss/cli": "^4.0.0",

package/src/theme.css

@@ -0,0 +1,214 @@
+/* ============================================================
+   Design system — tema ThinkInformes (clínico/médico, teal).
+   Valores: poc_generator DESIGN.md (OKLCH; light en :root, dark en .dark).
+
+   ── TRES SISTEMAS DE NOMBRES (no mezclarlos) ──
+   A) CANÓNICOS (shadcn-style): única fuente de verdad de color. SOLO estos
+      cambian en dark. Ej: --background, --foreground, --primary, --card.
+   B) HeroUI v3 (CONTRATO — no renombrar): nombres que @heroui/styles LEE para
+      pintar sus componentes. Acá son refs a (A). Ej: --accent, --surface,
+      --default, --muted, --danger, --focus.
+   C) Utilities Tailwind (CONTRATO — no renombrar): los --color-* del bloque
+      @theme inline definen las clases bg-* / text-* / border-* que usan los
+      blocks. Ej: --color-primary → bg-primary; --color-muted-foreground →
+      text-muted-foreground.
+
+   ── COLISIONES DE NOMBRE (la fuente de confusión — leer) ──
+     --accent    = MARCA primaria teal (semántica HeroUI), NO el "accent" neutro
+                   de shadcn.
+     --default   = superficie/botón NEUTRO (== --secondary), NO el primario.
+     --muted     = TEXTO atenuado (== --muted-foreground), NO una superficie.
+                   La utility text-muted pinta ese gris (CardDescription, etc).
+     --secondary = superficie NEUTRA clara (utility bg-secondary). Su texto va
+                   con text-muted / text-muted-foreground.
+     --surface   = --card  ·  --overlay = --popover   (superficies, nombres HeroUI).
+   ============================================================ */
+
+:root {
+  /* ════════ A) CANÓNICOS (light) — fuente de verdad ════════ */
+
+  /* Superficies + texto base */
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --secondary: oklch(0.97 0 0); /* superficie neutra */
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted-foreground: oklch(0.556 0 0); /* texto atenuado */
+
+  /* Marca */
+  --primary: oklch(0.47 0.097 183); /* teal-700 #0F766E */
+  --primary-foreground: oklch(0.985 0 0);
+
+  /* Estado */
+  --destructive: oklch(0.577 0.245 27.325);
+  --success: oklch(0.59 0.163 148); /* green-600 */
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.56 0.14 58); /* amber-700 */
+  --warning-foreground: oklch(1 0 0);
+
+  /* Bordes / input / foco / radio */
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.47 0.097 183);
+  --radius: 0.625rem;
+
+  /* Visor PACS — oscuro SIEMPRE (también en light) */
+  --viewer-bg: oklch(0.22 0.027 214);
+  --viewer-foreground: oklch(0.88 0.012 220);
+  --viewer-border: oklch(0.3 0.025 214);
+
+  /* Paleta categórica de charts (anclada en la marca teal) */
+  --chart-1: oklch(0.55 0.12 183); /* teal (marca) */
+  --chart-2: oklch(0.6 0.12 220); /* azul */
+  --chart-3: oklch(0.65 0.14 150); /* verde */
+  --chart-4: oklch(0.72 0.15 80); /* ámbar */
+  --chart-5: oklch(0.62 0.19 25); /* coral */
+
+  /* ════════ B) HeroUI v3 (refs a A — CONTRATO, no renombrar) ════════
+     --background/--foreground/--border/--success/--warning/--radius comparten
+     nombre y significado con (A): HeroUI los lee directo, no se repiten acá. */
+  --surface: var(--card);
+  --surface-foreground: var(--card-foreground);
+  --overlay: var(--popover);
+  --overlay-foreground: var(--popover-foreground);
+  --accent: var(--primary); /* acción primaria = marca teal */
+  --accent-foreground: var(--primary-foreground);
+  --default: var(--secondary); /* superficie/botón neutro */
+  --default-foreground: var(--secondary-foreground);
+  --muted: var(--muted-foreground); /* texto atenuado / placeholder */
+  --danger: var(--destructive);
+  --danger-foreground: var(--primary-foreground);
+  --separator: var(--border);
+  --focus: var(--ring);
+
+  /* Campos de formulario (input/textarea/number/search/select/date...) — HeroUI
+     los LEE de estos --field-*. Son el ÚNICO punto de override de la superficie
+     de un field: los wrappers ergonómicos rechazan `className` a propósito
+     (caería en el wrapper RAC, no en el <input> → miss silencioso). Refs a los
+     canónicos → siguen la marca y el dark sale gratis. Un consumidor re-skina
+     todos los fields pisando estas vars (o los canónicos que referencian). */
+  --field-background: var(--background);
+  --field-foreground: var(--foreground);
+  --field-placeholder: var(--muted-foreground);
+  --field-border: var(--input);
+  --field-border-hover: var(--input);
+  --field-border-focus: var(--ring);
+  --field-focus: var(--ring);
+  --field-radius: var(--radius);
+
+  /* Variantes soft on-brand (HeroUI *-soft, ej. Button danger-soft) */
+  --accent-soft: color-mix(in oklch, var(--primary) 14%, var(--surface));
+  --accent-soft-foreground: var(--primary);
+  --danger-soft: color-mix(in oklch, var(--destructive) 14%, var(--surface));
+  --danger-soft-foreground: var(--destructive);
+  --success-soft: color-mix(in oklch, var(--success) 14%, var(--surface));
+  --success-soft-foreground: var(--success);
+  --warning-soft: color-mix(in oklch, var(--warning) 16%, var(--surface));
+  --warning-soft-foreground: var(--warning);
+}
+
+/* ════════ Dark: SOLO redefine los canónicos (A). Las refs HeroUI (B) siguen. ════════ */
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --primary: oklch(0.79 0.12 181); /* teal-400, más brillante en dark */
+  --primary-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --success: oklch(0.7 0.16 150);
+  --success-foreground: oklch(0.205 0 0);
+  --warning: oklch(0.75 0.14 70);
+  --warning-foreground: oklch(0.205 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.79 0.12 181);
+  /* viewer-* sin cambios: el visor queda oscuro en ambos modos */
+  /* charts: más brillantes para contraste sobre fondo oscuro */
+  --chart-1: oklch(0.7 0.13 183);
+  --chart-2: oklch(0.7 0.13 220);
+  --chart-3: oklch(0.72 0.15 150);
+  --chart-4: oklch(0.78 0.15 80);
+  --chart-5: oklch(0.7 0.18 25);
+}
+
+/* ════════ C) Utilities Tailwind (@theme inline — CONTRATO de clases) ════════
+   Cada --color-X habilita bg-X / text-X / border-X. HeroUI ya mapea las suyas
+   (background/foreground/surface/accent/default/muted/...) vía @heroui/styles;
+   acá agregamos las shadcn que el consumidor usa y HeroUI no expone igual. */
+@theme inline {
+  /* Marca / superficies / estado */
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-destructive: var(--destructive);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* Texto atenuado → text-muted-foreground.
+     NO declarar --color-muted: HeroUI ya lo usa para `text-muted` (= var(--muted)
+     = gris legible). Pisarlo con una superficie deja el texto invisible. Para
+     superficie neutra usar bg-secondary; texto secundario = text-muted/-foreground. */
+  --color-muted-foreground: var(--muted-foreground);
+
+  /* Visor: bg-viewer-bg / text-viewer-foreground / border-viewer-border
+     (mismos nombres que el source del poc → migra verbatim). */
+  --color-viewer-bg: var(--viewer-bg);
+  --color-viewer-foreground: var(--viewer-foreground);
+  --color-viewer-border: var(--viewer-border);
+
+  /* Charts: fill-chart-1 / stroke-chart-1 / bg-chart-1 ... (paleta categórica) */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /* Radius (escala DESIGN.md) */
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+
+  /* Tipografía (el consumidor inyecta --font-* vía next/font; fallbacks acá) */
+  --font-sans: var(--font-atkinson, var(--font-lato, ui-sans-serif, system-ui, sans-serif));
+  --font-mono: var(--font-geist-mono, ui-monospace, monospace);
+  --font-heading: var(--font-sans);
+}
+
+/* Base raíz 18px (público médico 60+); todo el escalado rem sube proporcional. */
+@layer base {
+  html {
+    font-size: 18px;
+  }
+}
+
+/* ════════ Animaciones de recording-overlay (idénticas al source poc_generator) ════════
+   El block @lindaui/blocks/recording-overlay consume estas animaciones POR NOMBRE:
+   ti-rec-pulse / ti-rec-blink como clases, ti-wf inline en el waveform (usa --wfmax),
+   ti-fade en el root. Sin estos @keyframes el overlay se renderiza estático (las
+   clases existen pero no hay animación). Van unlayered para no depender del escaneo
+   Tailwind (son CSS literal, no utilities). */
+@keyframes ti-rec-pulse { 0% { transform: scale(0.62); opacity: 0.7; } 100% { transform: scale(1.25); opacity: 0; } }
+@keyframes ti-rec-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
+@keyframes ti-wf { 0%, 100% { height: 4px; } 50% { height: var(--wfmax); } }
+@keyframes ti-fade { from { opacity: 0; } }
+.ti-rec-pulse { animation: ti-rec-pulse 1.8s ease-out infinite; }
+.ti-rec-blink { animation: ti-rec-blink 1.2s ease-in-out infinite; }
+.ti-fade { animation: ti-fade 0.25s ease both; }