@proyecto-viviana/ui 0.4.1 → 0.5.0

package/dist/styles.css

@@ -4,6 +4,3 @@
    isn't reliably followed when this package is consumed through its export map,
    so we inline it (mirrors solid-spectrum, whose styles.css *is* its macro CSS). */
 @import "@proyecto-viviana/solid-spectrum/styles.css";
-
-/* viviana custom components — extracted S2 macro CSS (inlined) */
-@layer _.a{.LQAax0d151{max-width:calc(31.25rem * var(--s2-scale))}.ZKniM151{width:calc(5rem * var(--s2-scale))}.FKniM151{height:calc(5rem * var(--s2-scale))}.ij1j4Pd151{border-color:var(--color-accent)}._wb151{flex-wrap:wrap}._Ce151{justify-content:space-between}.Zm151{width:calc(1.25rem * var(--s2-scale))}.Fn151{height:calc(1.25rem * var(--s2-scale))}._Cg151{justify-content:start}._Cb151{justify-content:end}.Ua151{row-gap:.125rem}.qa151{column-gap:.125rem}.LbmOfn151{max-width:70%}.gg0eWE151{background-color:var(--color-bg-300)}._Pc151{position:relative}._Pa151{position:absolute}.WJ151{top:8px}._zI151{inset-inline-end:8px}.ZC151{width:calc(2rem * var(--s2-scale))}.Fx151{height:calc(2rem * var(--s2-scale))}.fu4qurc151{aspect-ratio:16/9}.-_6BNtrc-g151{--fs:pow(1.125, 4)}.Tt151{padding-top:8px}.Qt151{padding-bottom:8px}.St151{padding-inline-start:8px}.Rt151{padding-inline-end:8px}._Wd151{text-align:start}.ry151{cursor:pointer}._je151{border-style:none}.ZF151{width:calc(3rem * var(--s2-scale))}.Fz151{height:calc(3rem * var(--s2-scale))}._va151{flex-shrink:0}.ob151{border-start-start-radius:.5rem}.nb151{border-start-end-radius:.5rem}.kb151{border-end-start-radius:.5rem}.jb151{border-end-end-radius:.5rem}._Hb151{object-fit:cover}.xc151{font-weight:500}.pxeCuqc151{color:var(--color-text-secondary)}.ea151{align-items:baseline}.uk151{font-family:var(--s2-font-family-sans,adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;font-family:var(--s2-font-family-sans,adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;font-family:var(--s2-font-family-sans,adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;font-family:var(--s2-font-family-sans,adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif}.-_6BNtrc-KaY1Ce151{--fs:pow(1.125, 5)}.xf151{font-weight:900}._Fd151{line-height:round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base,14) * var(--fs)) - 10)) / 22) * .15), 2px);line-height:round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base,14) * var(--fs)) - 10)) / 22) * .15), 2px);line-height:round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base,14) * var(--fs)) - 10)) / 22) * .15), 2px);line-height:round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base,14) * var(--fs)) - 10)) / 22) * .15), 2px)}.po151{color:light-dark(#131313,#f2f2f2)}.pH0v9Fe151{color:var(--color-accent-500)}.Mc151{min-height:100vh}.g318zje151{background-color:var(--color-background)}.Tr151{padding-top:64px}._nLeasBb151{box-shadow:0 4px 12px light-dark(#00000014,#0000003d),0 2px 6px light-dark(#0000000a,#0000001f),0 0 2px light-dark(#0000001f,#0000005c)}.ed151{align-items:start}.Ub151{row-gap:.25rem}.qb151{column-gap:.25rem}._ub151{flex-grow:1}.Na151{min-width:0}.Ul151{row-gap:1rem}.ql151{column-gap:1rem}.oc151{border-start-start-radius:.625rem}.nc151{border-start-end-radius:.625rem}.kc151{border-end-start-radius:.625rem}.jc151{border-end-end-radius:.625rem}.izfTM5151{border-color:var(--color-border)}._Xa151{text-decoration:none}.Te151{padding-top:12px}.Tf151{padding-top:16px}.Qe151{padding-bottom:12px}.Qf151{padding-bottom:16px}.Sf151{padding-inline-start:16px}.Rf151{padding-inline-end:16px}._Ib151{opacity:1}._IqmMfn151{opacity:.5}.fa151{aspect-ratio:1}._Ha151{object-fit:contain}.oa151{border-start-start-radius:.25rem}.na151{border-start-end-radius:.25rem}.ka151{border-end-start-radius:.25rem}.ja151{border-end-end-radius:.25rem}.Za151{width:100%}.uk151{font-family:var(--s2-font-family-sans,adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;font-family:var(--s2-font-family-sans,adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;font-family:var(--s2-font-family-sans,adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif}.-_6BNtrc-d151{--fs:pow(1.125, 1)}._Fd151{line-height:round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base,14) * var(--fs)) - 10)) / 22) * .15), 2px);line-height:round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base,14) * var(--fs)) - 10)) / 22) * .15), 2px);line-height:round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base,14) * var(--fs)) - 10)) / 22) * .15), 2px)}._ta151{flex-direction:column}.Ui151{row-gap:1.25rem}.qi151{column-gap:1.25rem}.Tg151{padding-top:20px}.Qg151{padding-bottom:20px}.Sg151{padding-inline-start:20px}.Rg151{padding-inline-end:20px}.oe151{border-start-start-radius:1rem}.ne151{border-start-end-radius:1rem}.ke151{border-end-start-radius:1rem}.je151{border-end-end-radius:1rem}._kb151{border-top-width:1px}.hb151{border-bottom-width:1px}.mb151{border-inline-start-width:1px}.lb151{border-inline-end-width:1px}.iJJKqyb151{border-color:var(--color-primary-700)}.gDE5VE151{background-color:var(--color-bg-200)}.Ug151{row-gap:.75rem}.qg151{column-gap:.75rem}._Wa151{text-align:center}.-_6BNtrc-c151{--fs:pow(1.125, 0)}.sh151{display:inline-flex}.eb151{align-items:center}._Ca151{justify-content:center}.qc151{column-gap:.428571em}.Mg151{min-height:calc(1.5rem * var(--s2-scale))}.ZJ151{width:fit-content}.Se151{padding-inline-start:12px}.Re151{padding-inline-end:12px}.og151{border-start-start-radius:9999px}.ng151{border-start-end-radius:9999px}.kg151{border-end-start-radius:9999px}.jg151{border-end-end-radius:9999px}._jf151{border-style:solid}._kc151{border-top-width:2px}.hc151{border-bottom-width:2px}.mc151{border-inline-start-width:2px}.lc151{border-inline-end-width:2px}.padAQ7151{color:var(--color-grey-900)}.pAZZpyb151{color:var(--color-primary-200)}.iA151{border-color:#0000}.i6nBqyb151{border-color:var(--color-primary-600)}.gJJKqyb151{background-color:var(--color-primary-700)}.g0iWVE151{background-color:var(--color-bg-100)}.gj1j4Pd151{background-color:var(--color-accent)}.g9151{background-color:#0000}.-_6BNtrc-f151{--fs:pow(1.125, 3)}.xe151{font-weight:800}.pXDQpyb151{color:var(--color-primary-100)}._Nc151{overflow-x:hidden}.Pc151{overflow-y:hidden}._Yb151{text-overflow:ellipsis}._7c151{white-space:nowrap}.xd151{font-weight:700}.uk151{font-family:var(--s2-font-family-sans,adobe-clean-spectrum-vf), adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif}.-_6BNtrc-b151{--fs:pow(1.125, -1)}.vx151{font-size:round(var(--s2-font-size-base,14) * var(--fs) / 16 * 1rem, 1px)}.xb151{font-weight:400}._xa151{font-synthesis-weight:none}._Fd151{line-height:round(1em * (1.15 + (1 - ((min(32, var(--s2-font-size-base,14) * var(--fs)) - 10)) / 22) * .15), 2px)}.pO550xe151{color:var(--color-text)}.sd151{display:flex}.Ue151{row-gap:.5rem}.qe151{column-gap:.5rem}}@layer _.b{.xfd151:lang(ja,ko,zh,zh-Hant,zh-Hans){font-weight:700}._xfa151:lang(ja,ko,zh,zh-Hant,zh-Hans){font-synthesis-weight:none}.xX0cczbd151:lang(ja,ko,zh){font-weight:700}.xX0cczbc151:lang(ja,ko,zh){font-weight:500}._xX0cczba151:lang(ja,ko,zh){font-synthesis-weight:none}.ucJ9TBTb151:lang(ar){font-family:adobe-clean-arabic,myriad-arabic,ui-sans-serif,system-ui,sans-serif}._FnuYUweb151:lang(ja,ko,zh,zh-Hant,zh-Hans,zh-CN,zh-SG){line-height:1.5}}@layer _.c{.xfX0cczbc151:lang(ja,ko,zh):lang(ja,ko,zh,zh-Hant,zh-Hans){font-weight:500}._xfX0cczba151:lang(ja,ko,zh):lang(ja,ko,zh,zh-Hant,zh-Hans){font-synthesis-weight:none}.xfe151:lang(ja,ko,zh,zh-Hant,zh-Hans){font-weight:800}._xfa151:lang(ja,ko,zh,zh-Hant,zh-Hans){font-synthesis-weight:none}.ud3Euai151:lang(he){font-family:adobe-clean-hebrew,myriad-hebrew,ui-sans-serif,system-ui,sans-serif}}@layer _.d{.xfX0cczbd151:lang(ja,ko,zh):lang(ja,ko,zh,zh-Hant,zh-Hans){font-weight:700}._xfX0cczba151:lang(ja,ko,zh):lang(ja,ko,zh,zh-Hant,zh-Hans){font-synthesis-weight:none}.uea151:lang(ja){font-family:adobe-clean-han-japanese,Hiragino Kaku Gothic ProN,ヒラギノ角ゴ ProN W3,Osaka,YuGothic,Yu Gothic,メイリオ,Meiryo,ＭＳ Ｐゴシック,MS PGothic,sans-serif}}@layer _.e{.ugb151:lang(ko){font-family:adobe-clean-han-korean,source-han-korean,Malgun Gothic,Apple Gothic,sans-serif}}@layer _.f{.uhd151:lang(zh){font-family:adobe-clean-han-traditional,source-han-traditional,MingLiu,Heiti TC Light,sans-serif}}@layer _.g{.uje151:lang(zh-hant){font-family:adobe-clean-han-traditional,source-han-traditional,MingLiu,Microsoft JhengHei UI,Microsoft JhengHei,Heiti TC Light,sans-serif}}@layer _.h{.u2NhKxcl151:lang(zh-HK){font-family:adobe-clean-han-hong-kong,source-han-hong-kong,MingLiu,Microsoft JhengHei UI,Microsoft JhengHei,Heiti TC Light,sans-serif}}@layer _.i{.uic151:lang(zh-Hans,zh-CN,zh-SG){font-family:adobe-clean-han-simplified-c,source-han-simplified-c,SimSun,Heiti SC Light,sans-serif}}@layer _.b.s{@media not ((hover:hover) and (pointer:fine)){.qsd151{column-gap:.470588em}}}

package/dist/viviana-tokens.css

@@ -1,88 +1,99 @@
 /*
- * Viviana ("Silapse") design tokens.
+ * Viviana UI design tokens — blue + amber frosted glass.
  *
  * The brand's color palette + typography, owned by the design system itself so
  * the product components are self-contained. The S2 style() macro carries the
  * *shape* (spacing, radius, sizing, type ramp) via its named tokens; these vars
- * supply the *colors*, referenced from components as arbitrary `[var(--color-*)]`
- * values. Dark is the default (`:root`); light overrides bind to the same
- * `data-color-scheme` attribute solid-spectrum's theme uses, so a single scheme
- * switch flips both layers together.
+ * supply the *color* + the *frosted-glass effect* families, referenced from
+ * components as arbitrary `[var(--color-*)]` / `[var(--surface-*)]` values.
+ *
+ * This is the retuned Viviana UI token layer authored on the
+ * `design/visual-system-claude-v1` lane (see `.claude/current/visual-system-lane.md`).
+ * It supersedes the earlier blue + pink "Silapse" palette: the accent family is
+ * now amber (the single warm, one-per-screen action color), blue carries
+ * wayfinding/selection, and new **surface / blur / edge-glass / glow / shadow**
+ * families express the frosted-glass surface ladder. Semantic
+ * success/warning/danger are unchanged. The values are the canonical spec
+ * transcribed from the paired design handoff; the Education reference route keeps
+ * the same semantic names under its `.vui` scope.
  *
- * Values mirror apps/web's palette verbatim — keep them in sync until apps/web
- * consumes this file directly.
+ * Dark is the default (`:root`); light overrides bind to the same
+ * `data-color-scheme` attribute solid-spectrum's theme uses, so a single scheme
+ * switch flips both layers together. `apps/web` still ships its own copy of the
+ * legacy palette until the Tailwind-removal Phase 4 restyle consumes this file
+ * directly (`.claude/current/tailwind-removal.md`).
  */
 
 :root {
-  /* Grey scale */
-  --color-grey-50: #ffffff;
-  --color-grey-100: #e0e0e0;
-  --color-grey-200: #c0c0c0;
-  --color-grey-300: #a0a0a0;
-  --color-grey-400: #606060;
-  --color-grey-500: #404040;
-  --color-grey-600: #1a1a1a;
-  --color-grey-700: #111111;
-  --color-grey-800: #0a0a0a;
-  --color-grey-900: #000000;
-
-  /* Blue scale */
-  --color-blue-50: #f0f7ff;
-  --color-blue-100: #ddf4ff;
-  --color-blue-200: #b6e3ff;
-  --color-blue-300: #80ccff;
-  --color-blue-400: #54aeff;
-  --color-blue-500: #388bfd;
-  --color-blue-600: #1f6feb;
-  --color-blue-700: #1158c7;
-  --color-blue-800: #0d419d;
-  --color-blue-900: #050a12;
-
-  /* Pink scale */
-  --color-pink-50: #fff5f9;
-  --color-pink-100: #ffe4f3;
-  --color-pink-200: #ffc9e9;
-  --color-pink-300: #ffa0d5;
-  --color-pink-400: #f778ba;
-  --color-pink-500: #d84a8f;
-  --color-pink-600: #b13570;
-  --color-pink-700: #912b5a;
-  --color-pink-800: #702244;
-  --color-pink-900: #0f0508;
-
-  /* Background — pure void */
-  --color-bg-100: #404040;
-  --color-bg-200: #252525;
-  --color-bg-300: #1a1a1a;
-  --color-bg-400: #111111;
-  --color-bg-light: #515151;
-
-  /* Primary — blue scale */
-  --color-primary: #75abc7;
-  --color-primary-50: #081018;
-  --color-primary-100: #ddf4ff;
-  --color-primary-200: #b6e3ff;
-  --color-primary-300: #80ccff;
-  --color-primary-400: #54aeff;
-  --color-primary-500: #4da0ff;
-  --color-primary-600: #3080f4;
-  --color-primary-700: #1158c7;
-  --color-primary-800: #0d419d;
-  --color-primary-900: #050a12;
-
-  /* Accent — pink */
-  --color-accent: #df5c9a;
-  --color-accent-50: #100810;
-  --color-accent-100: #0f0508;
-  --color-accent-200: #150a12;
-  --color-accent-300: #ffa0d5;
-  --color-accent-400: #f778ba;
-  --color-accent-500: #d84a8f;
-  --color-accent-600: #f778ba;
-  --color-accent-700: #ffa0d5;
-  --color-accent-800: #ffc9e9;
-  --color-accent-900: #0f0508;
-  --color-accent-highlight: #e2a2be;
+  /* Grey scale — charcoal-slate neutral ramp */
+  --color-grey-50: #f3f4f6;
+  --color-grey-100: #d7dce2;
+  --color-grey-200: #b9c0c9;
+  --color-grey-300: #97a1ab;
+  --color-grey-400: #626d78;
+  --color-grey-500: #4a545e;
+  --color-grey-600: #333c45;
+  --color-grey-700: #232d37;
+  --color-grey-800: #1a222a;
+  --color-grey-900: #10161c;
+
+  /* Blue scale — wayfinding / selection */
+  --color-blue-50: #eaf4fe;
+  --color-blue-100: #d4e9fd;
+  --color-blue-200: #a8d2fb;
+  --color-blue-300: #7cbaf8;
+  --color-blue-400: #55a6f6;
+  --color-blue-500: #2e90fa;
+  --color-blue-600: #1877e8;
+  --color-blue-700: #135fc0;
+  --color-blue-800: #0e4a99;
+  --color-blue-900: #0a2f63;
+
+  /* Amber scale — the single warm action accent */
+  --color-amber-50: #fef4e6;
+  --color-amber-100: #fde7c8;
+  --color-amber-200: #fcd9a0;
+  --color-amber-300: #f9c270;
+  --color-amber-400: #f9a838;
+  --color-amber-500: #f79009;
+  --color-amber-600: #e07b00;
+  --color-amber-700: #b86200;
+  --color-amber-800: #8f4c00;
+  --color-amber-900: #3b2200;
+
+  /* Background — frosted charcoal ladder (near-opaque worst-case surfaces) */
+  --color-bg-100: #2a333c;
+  --color-bg-200: #232d37;
+  --color-bg-300: #1b242c;
+  --color-bg-400: #141a1f;
+  --color-bg-light: #33424e;
+
+  /* Primary — blue */
+  --color-primary: #55a6f6;
+  --color-primary-50: #0a1826;
+  --color-primary-100: #d4e9fd;
+  --color-primary-200: #a8d2fb;
+  --color-primary-300: #7cbaf8;
+  --color-primary-400: #55a6f6;
+  --color-primary-500: #2e90fa;
+  --color-primary-600: #1877e8;
+  --color-primary-700: #135fc0;
+  --color-primary-800: #0e4a99;
+  --color-primary-900: #0a2f63;
+
+  /* Accent — amber (high indices lighten for text/marks on dark) */
+  --color-accent: #f79009;
+  --color-accent-50: #1f1405;
+  --color-accent-100: #fde7c8;
+  --color-accent-200: #fcd9a0;
+  --color-accent-300: #f9c270;
+  --color-accent-400: #f9a838;
+  --color-accent-500: #f79009;
+  --color-accent-600: #f9a838;
+  --color-accent-700: #f9c270;
+  --color-accent-800: #fde7c8;
+  --color-accent-900: #3b2200;
+  --color-accent-highlight: #f9c270;
 
   /* Semantic colors */
   --color-success-100: #e5fff3;
@@ -114,36 +125,36 @@
   --color-danger-900: #ffe5e5;
 
   /* Cards */
-  --color-cards-bg: #373737;
-  --color-cards-bg-load: #484848;
+  --color-cards-bg: #232d37;
+  --color-cards-bg-load: #2f3a44;
   --color-correct: #83f1a7;
   --color-incorrect: #e74c3c;
 
   /* Canvas */
-  --color-canvas-bg: #000000;
+  --color-canvas-bg: #10161c;
 
-  /* Surfaces */
-  --color-background: #000000;
-  --color-surface: #0a0a0a;
-  --color-surface-elevated: #111111;
+  /* Surfaces (opaque) */
+  --color-background: #141a1f;
+  --color-surface: #1b242c;
+  --color-surface-elevated: #232d37;
 
   /* Blue depth backgrounds */
-  --color-bg-blue-deep: #050a12;
-  --color-bg-blue-dark: #081020;
-  --color-bg-blue-mid: #0a1830;
-  --color-bg-blue-light: #102040;
+  --color-bg-blue-deep: #071726;
+  --color-bg-blue-dark: #0a1f33;
+  --color-bg-blue-mid: #0e2a44;
+  --color-bg-blue-light: #123a5e;
 
   /* Text */
-  --color-text: #ffffff;
-  --color-text-secondary: #a0a0a0;
-  --color-text-muted: #606060;
-  --color-text-dim: #4f6d85;
-  --color-text-disabled: #404040;
+  --color-text: #f3f4f6;
+  --color-text-secondary: #97a1ab;
+  --color-text-muted: #626d78;
+  --color-text-dim: #55708a;
+  --color-text-disabled: #3a444e;
 
   /* Borders */
-  --color-border: #1a1a1a;
-  --color-border-muted: #141414;
-  --color-divider: #141414;
+  --color-border: #232d37;
+  --color-border-muted: #1a222a;
+  --color-divider: #1a222a;
 
   /* Semantic base + dim */
   --color-success: #3fb950;
@@ -154,22 +165,51 @@
   --color-danger-dim: #da3633;
 
   /* Dim versions (wire base / inactive elements) */
-  --color-primary-dim: #1a3040;
-  --color-accent-dim: #301520;
+  --color-primary-dim: #123a5e;
+  --color-accent-dim: #3b2a12;
 
   /* Header background */
-  --color-header-bg: #181818;
+  --color-header-bg: #1b242c;
 
-  /* Glow effects (for drop-shadow filters) */
-  --color-primary-glow: rgba(128, 204, 255, 0.6);
-  --color-accent-glow: rgba(255, 160, 213, 0.6);
-  --color-fusion-glow: rgba(180, 140, 230, 0.7);
+  /* Glow effects (for drop-shadow filters) — blue + amber */
+  --color-primary-glow: rgba(46, 144, 250, 0.55);
+  --color-accent-glow: rgba(247, 144, 9, 0.5);
+  --color-fusion-glow: rgba(139, 92, 246, 0.5);
 
   /* Semantic background tints */
   --color-success-bg: rgba(63, 185, 80, 0.1);
   --color-warning-bg: rgba(210, 153, 34, 0.1);
   --color-danger-bg: rgba(248, 81, 73, 0.1);
 
+  /* ── Frosted-glass surface family (translucent ladder over a lit scene) ── */
+  --surface-app: #1e2227;
+  --surface-panel: rgba(20, 26, 31, 0.94);
+  --surface-card: rgba(27, 36, 44, 0.9);
+  --surface-raised: rgba(35, 45, 55, 0.95);
+  --surface-inset: rgba(13, 17, 21, 0.72);
+  --surface-hover: rgba(42, 53, 64, 0.95);
+  --surface-ghost: rgba(30, 36, 41, 0.28);
+
+  /* Accent surface tints (soft fills for selected/warm states) */
+  --accent-primary: var(--color-primary);
+  --accent-primary-soft: rgba(46, 144, 250, 0.15);
+  --accent-warm: var(--color-accent);
+  --accent-warm-soft: rgba(247, 144, 9, 0.15);
+
+  /* ── Blur family ── */
+  --blur-panel: blur(18px);
+  --blur-card: blur(10px);
+
+  /* ── Edge-glass (inner highlight that catches the light) ── */
+  --edge-glass: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 0 0 1px rgba(255, 255, 255, 0.04);
+
+  /* ── Shadow + glow family (glow follows the accent, never the chrome) ── */
+  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.4);
+  --shadow-panel: 0 12px 40px rgba(0, 0, 0, 0.5);
+  --shadow-float: 0 16px 48px rgba(0, 0, 0, 0.6);
+  --shadow-glow-blue: 0 0 24px rgba(46, 144, 250, 0.35);
+  --shadow-glow-warm: 0 0 24px rgba(247, 144, 9, 0.3);
+
   /* Typography */
   --font-sen: "Sen", sans-serif;
   --font-jost: "Jost", sans-serif;
@@ -177,6 +217,8 @@
   --font-mono: "JetBrains Mono", monospace;
   --font-title: "Jost", system-ui, sans-serif;
   --font-body: "Sen", system-ui, sans-serif;
+  --font-display: var(--font-jost);
+  --font-ui: var(--font-sen);
 }
 
 [data-color-scheme="light"] {
@@ -191,55 +233,56 @@
   --color-grey-800: #262626;
   --color-grey-900: #171717;
 
-  --color-blue-100: #e0f0f7;
-  --color-blue-200: #b6d9eb;
-  --color-blue-300: #8bc4db;
-  --color-blue-400: #75abc7;
-  --color-blue-500: #5a94b3;
-  --color-blue-600: #3d7a9c;
-  --color-blue-700: #2b6080;
-  --color-blue-800: #1a4560;
-  --color-blue-900: #0d2a3d;
-
-  --color-pink-100: #fef2f7;
-  --color-pink-200: #fcc7e0;
-  --color-pink-300: #f78fb9;
-  --color-pink-400: #df5c9a;
-  --color-pink-500: #cf2c74;
-  --color-pink-600: #a31f58;
-  --color-pink-700: #8a1a4a;
-  --color-pink-800: #6b143a;
-  --color-pink-900: #4d0f2a;
-
-  /* Backgrounds — AA-verified against primary text */
-  --color-bg-100: #7096a8;
-  --color-bg-200: #a8c5d4;
-  --color-bg-300: #c8dce6;
-  --color-bg-400: #dbe8ef;
+  /* Blue + primary FLIP for daylight: the :root (dark) ramp runs light→dark as
+     the index climbs, so the low indices (100/200/300 — used as *text*: wordmarks,
+     card titles, nav section titles, active links) must invert to dark navy here,
+     or they render near-invisible on the light surfaces. Mid index 500 stays a
+     readable medium blue (its only text use sits on the light bg-400 bar); 700
+     lightens because it is a *fill* (the primary Chip) that carries dark text.
+     Same hue as dark — only lightness/saturation shift for AA (WCAG verified
+     against the bg-* ladder below). Blue mirrors primary (no direct consumers,
+     kept in lockstep for future use). */
+  --color-blue-50: #eef5ff;
+  --color-blue-100: #08203c;
+  --color-blue-200: #0b2a4a;
+  --color-blue-300: #103c67;
+  --color-blue-400: #15508a;
+  --color-blue-500: #1a5fa3;
+  --color-blue-600: #2270b0;
+  --color-blue-700: #6fa8d6;
+  --color-blue-800: #a8cfec;
+  --color-blue-900: #0b2545;
+  --color-primary: #1a5fa3;
+  --color-primary-50: #eef5ff;
+  --color-primary-100: #08203c;
+  --color-primary-200: #0b2a4a;
+  --color-primary-300: #103c67;
+  --color-primary-400: #15508a;
+  --color-primary-500: #1a5fa3;
+  --color-primary-600: #2270b0;
+  --color-primary-700: #6fa8d6;
+  --color-primary-800: #a8cfec;
+  --color-primary-900: #0b2545;
+
+  /* Amber accent — high indices darken for text/marks on light */
+  --color-accent: #f79009;
+  --color-accent-100: #fef4e6;
+  --color-accent-200: #7a4a00;
+  --color-accent-300: #f9c270;
+  --color-accent-400: #f79009;
+  --color-accent-500: #8a5200;
+  --color-accent-highlight: #e07b00;
+
+  /* Backgrounds — daylight slate ladder, AA-verified against primary text.
+     bg-100 (the darkest rung, e.g. the secondary Chip fill) is lightened enough
+     that dark primary-200 text clears 4.5:1 on it — a mid-slate cannot host any
+     AA text. */
+  --color-bg-100: #7ba0b3;
+  --color-bg-200: #aebccb;
+  --color-bg-300: #cdd8e4;
+  --color-bg-400: #e2e9f1;
   --color-bg-light: #ffffff;
 
-  /* Primary — blue */
-  --color-primary: #75abc7;
-  --color-primary-50: #f0f7ff;
-  --color-primary-100: #06131d;
-  --color-primary-200: #0c2436;
-  --color-primary-300: #133a54;
-  --color-primary-400: #195073;
-  --color-primary-500: #1e6090;
-  --color-primary-600: #2470a5;
-  --color-primary-700: #5ea8d0;
-  --color-primary-800: #9dcce4;
-  --color-primary-900: #0d2a3d;
-
-  /* Accent — pink */
-  --color-accent: #df5c9a;
-  --color-accent-100: #fef2f7;
-  --color-accent-200: #7d1c48;
-  --color-accent-300: #f78fb9;
-  --color-accent-400: #df5c9a;
-  --color-accent-500: #8a1e4a;
-  --color-accent-highlight: #d4508a;
-
   /* Semantic — darker for readability on light bgs */
   --color-success-100: #e5fff3;
   --color-success-200: #c2ffc8;
@@ -269,33 +312,39 @@
   --color-danger-800: #572f2f;
   --color-danger-900: #351c1c;
 
-  --color-cards-bg: #ecf2f5;
-  --color-cards-bg-load: #dfeaef;
+  --color-cards-bg: #ffffff;
+  --color-cards-bg-load: #eef3f9;
   --color-correct: #1a7f37;
   --color-incorrect: #cf222e;
 
-  --color-canvas-bg: #404040;
+  --color-canvas-bg: #dbe8ef;
 
-  /* Surfaces */
-  --color-background: #f2f7fa;
+  /* Surfaces (opaque) */
+  --color-background: #eef3f9;
   --color-surface: #ffffff;
-  --color-surface-elevated: #e6f0f5;
+  --color-surface-elevated: #e7edf5;
 
-  --color-bg-blue-deep: #e0f0f7;
-  --color-bg-blue-dark: #b6d9eb;
-  --color-bg-blue-mid: #8bc4db;
-  --color-bg-blue-light: #75abc7;
+  --color-bg-blue-deep: #eaf4fe;
+  --color-bg-blue-dark: #d4e9fd;
+  --color-bg-blue-mid: #a8d2fb;
+  --color-bg-blue-light: #7cbaf8;
 
   /* Text */
-  --color-text: #1a3040;
+  --color-text: #17212e;
+  /* WCAG AA: secondary text lands as normal-size runs on the light
+     --color-bg-300 card (EventListItem subtitle, CalendarCard "seguida por"
+     connector). A mid-slate (#64748b) read only 3.29:1 there; this darker
+     slate-blue clears 4.82:1 on bg-300 while staying the same hue and reading
+     as muted secondary against the near-black --color-text. */
   --color-text-secondary: #405d70;
-  --color-text-muted: #7096a8;
-  --color-text-disabled: #a8c5d4;
+  --color-text-muted: #94a3b8;
+  --color-text-dim: #64748b;
+  --color-text-disabled: #c4d0de;
 
   /* Borders */
-  --color-border: #c8dce6;
-  --color-border-muted: #dbe8ef;
-  --color-divider: #dbe8ef;
+  --color-border: #dce4ee;
+  --color-border-muted: #eaeff6;
+  --color-divider: #eaeff6;
 
   /* Semantic base + dim */
   --color-success: #5bc96e;
@@ -306,13 +355,33 @@
   --color-danger-dim: #9d5555;
 
   /* Dim, glow, bg tints */
-  --color-primary-dim: #b6d9eb;
-  --color-accent-dim: #fcc7e0;
-  --color-header-bg: #d0e4ed;
-  --color-primary-glow: rgba(117, 171, 199, 0.4);
-  --color-accent-glow: rgba(223, 92, 154, 0.4);
-  --color-fusion-glow: rgba(170, 130, 180, 0.5);
+  --color-primary-dim: #d4e9fd;
+  --color-accent-dim: #fde7c8;
+  --color-header-bg: #e7edf5;
+  --color-primary-glow: rgba(46, 144, 250, 0.4);
+  --color-accent-glow: rgba(247, 144, 9, 0.35);
+  --color-fusion-glow: rgba(139, 92, 246, 0.4);
   --color-success-bg: rgba(63, 185, 80, 0.1);
   --color-warning-bg: rgba(210, 153, 34, 0.15);
   --color-danger-bg: rgba(248, 81, 73, 0.1);
+
+  /* ── Frosted-glass surface family (daylight) ── */
+  --surface-app: #e9eff6;
+  --surface-panel: rgba(255, 255, 255, 0.42);
+  --surface-card: rgba(255, 255, 255, 0.55);
+  --surface-raised: rgba(255, 255, 255, 0.88);
+  --surface-inset: rgba(238, 243, 249, 0.55);
+  --surface-hover: rgba(255, 255, 255, 0.75);
+  --surface-ghost: rgba(255, 255, 255, 0.18);
+
+  --accent-primary-soft: rgba(46, 144, 250, 0.1);
+  --accent-warm-soft: rgba(247, 144, 9, 0.1);
+
+  /* Edge-glass + shadow/glow — daylight (soft, cool-tinted; glow carries accent) */
+  --edge-glass: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
+  --shadow-card: 0 2px 8px rgba(99, 115, 139, 0.08), 0 8px 24px rgba(99, 115, 139, 0.1);
+  --shadow-panel: 0 12px 40px rgba(99, 115, 139, 0.14);
+  --shadow-float: 0 16px 48px rgba(99, 115, 139, 0.22);
+  --shadow-glow-blue: 0 4px 20px rgba(46, 144, 250, 0.28);
+  --shadow-glow-warm: 0 4px 20px rgba(247, 144, 9, 0.24);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proyecto-viviana/ui",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Viviana design system. Starts by re-exporting @proyecto-viviana/solid-spectrum (same components + tokens + style macro); diverges (viviana tokens, then components) over time.",
   "license": "MIT",
   "repository": {
@@ -218,60 +218,6 @@
       "import": "./dist/TreeView.js",
       "default": "./dist/TreeView.js"
     },
-    "./CalendarCard": {
-      "types": "./dist/CalendarCard.d.ts",
-      "solid": "./dist/CalendarCard.jsx",
-      "import": "./dist/CalendarCard.js",
-      "default": "./dist/CalendarCard.js"
-    },
-    "./Chip": {
-      "types": "./dist/Chip.d.ts",
-      "solid": "./dist/Chip.jsx",
-      "import": "./dist/Chip.js",
-      "default": "./dist/Chip.js"
-    },
-    "./Conversation": {
-      "types": "./dist/Conversation.d.ts",
-      "solid": "./dist/Conversation.jsx",
-      "import": "./dist/Conversation.js",
-      "default": "./dist/Conversation.js"
-    },
-    "./EventCard": {
-      "types": "./dist/EventCard.d.ts",
-      "solid": "./dist/EventCard.jsx",
-      "import": "./dist/EventCard.js",
-      "default": "./dist/EventCard.js"
-    },
-    "./Logo": {
-      "types": "./dist/Logo.d.ts",
-      "solid": "./dist/Logo.jsx",
-      "import": "./dist/Logo.js",
-      "default": "./dist/Logo.js"
-    },
-    "./PageLayout": {
-      "types": "./dist/PageLayout.d.ts",
-      "solid": "./dist/PageLayout.jsx",
-      "import": "./dist/PageLayout.js",
-      "default": "./dist/PageLayout.js"
-    },
-    "./ProfileCard": {
-      "types": "./dist/ProfileCard.d.ts",
-      "solid": "./dist/ProfileCard.jsx",
-      "import": "./dist/ProfileCard.js",
-      "default": "./dist/ProfileCard.js"
-    },
-    "./ProjectCard": {
-      "types": "./dist/ProjectCard.d.ts",
-      "solid": "./dist/ProjectCard.jsx",
-      "import": "./dist/ProjectCard.js",
-      "default": "./dist/ProjectCard.js"
-    },
-    "./TimelineItem": {
-      "types": "./dist/TimelineItem.d.ts",
-      "solid": "./dist/TimelineItem.jsx",
-      "import": "./dist/TimelineItem.js",
-      "default": "./dist/TimelineItem.js"
-    },
     "./theme.css": "./dist/theme.css",
     "./font-faces.css": "./dist/font-faces.css",
     "./styles.css": "./dist/styles.css",
@@ -299,8 +245,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@proyecto-viviana/solid-spectrum": "0.6.1",
-    "@proyecto-viviana/solidaria-components": "0.4.1"
+    "@proyecto-viviana/solidaria-components": "0.4.1",
+    "@proyecto-viviana/solid-spectrum": "0.6.2"
   },
   "devDependencies": {
     "solid-js": "^1.9.0",