:root{--brand-ink: #232221;--brand-sage-dark: #5f6a55;--brand-sage-light: #9faa7c;--brand-cream: #f4efdf;--brand-amber: #eac573;--brand-clay: #c94b36;--brand-clay-alt: #d27842;--brand-violet: #c183c6;--brand-blue: #3f5eaa;--brand-sky: #97c9dd;--font-display: "PP Fragment", "Fraunces", serif;--font-eyebrow: "Highway Gothic", sans-serif;--font-body: "Inter", sans-serif;--font-mono: "IBM Plex Mono", monospace;--fw-regular: 400;--fw-medium: 500;--fw-semibold: 600;--color-bg: var(--brand-cream);--color-accent: var(--brand-clay);--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.5rem;--space-6: 2rem;--space-7: 3rem;--radius-sm: .375rem;--radius-md: .625rem;--radius-lg: 1rem;--radius-pill: 999px;--shadow-1: 0 1px 2px rgba(0, 0, 0, .06);--shadow-2: 0 2px 6px rgba(0, 0, 0, .08);--shadow-3: 0 6px 16px rgba(0, 0, 0, .1);--shadow-4: 0 12px 32px rgba(0, 0, 0, .14);--dur-hover: .15s;--dur-press: .1s;--dur-enter: .3s;--dur-exit: .2s;--dur-drawer: .3s;--ease-enter: cubic-bezier(0, 0, .2, 1);--ease-move: cubic-bezier(.4, 0, .2, 1);--rail-thin: 3px;--rail-medium: 5px;--rail-thick: 8px;--sidebar-w: 240px;--drawer-w: 300px;--content-max: 1200px;--z-scrim: 190;--z-drawer: 200;--type-caption: .75rem;--type-label: .8125rem;--type-body: .875rem;--type-h3: 1.125rem;--type-h2: 1.375rem;--type-h1: 1.75rem;--type-display: 2.125rem;--lh-tight: 1.1;--lh-snug: 1.3;--lh-body: 1.5;--tracking-tight: -.01em;--tracking-eyebrow: .08em;--type-heading-sm: var(--type-h3);--color-text: #232221;--color-text-secondary: rgba(35, 34, 33, .65);--color-text-muted: rgba(35, 34, 33, .38);--color-text-on-accent: #ffffff;--color-surface: #ffffff;--color-surface-2: #f5f4f1;--color-elevated: #ffffff;--color-overlay: #ffffff;--color-border: rgba(35, 34, 33, .1);--color-border-strong: rgba(35, 34, 33, .22);--color-scrim: rgba(35, 34, 33, .5);--color-accent-hover: #a83a27;--color-accent-tint: rgba(201, 75, 54, .08);--color-accent-vivid: #c94b36;--focus-ring: 0 0 0 3px rgba(201, 75, 54, .28);--clay-50: #fdf0ee;--clay-400: #c94b36;--clay-700: #8f2c1c;--sage-100: #eef1e9;--sage-200: #d5dcc8;--sage-300: #b6c4a2;--sage-400: #9faa7c;--sage-800: #3a4431;--amber-tint: #fdf5e0;--amber-mid: #eac573;--amber-strong: #b08a1a;--red-tint: #fef1ef;--red-mid: #d94040;--red-strong: #b02828;--info-tint: #edf1f9;--info-mid: #3f5eaa;--info-strong: #2c4282;--green-tint: #ecf6ee;--green-mid: #3d8a50;--green-strong: #276337;--violet-tint: #f8eef9;--violet-mid: #c183c6;--violet-strong: #8c4f92}--ease-*,--rail-*,--sidebar-w/--drawer-w/ --content-max,--type-*,--lh-*,--tracking-*) es una escala estándar mía (8pt grid,tipo modular,easing convencional),NO viene de ningún asset de marca — un manual de marca no define eso. La excepción real ahí son --z-scrim/--z-drawer (190/200) y --dur-enter/--dur-exit + --ease-enter/--ease-move (.3s/.2s),que sí están fijados en README.md §"Navegación responsive". Es TEMPORAL: cuando vuelva `design/tokens/tokens.css` original de la máquina del colega,ese archivo pisa este bloque entero (no solo los colores) si define sus propios valores de espaciado/tipografía — avisame cuando lo tengas para reemplazarlo. PENDIENTE — color,sin correspondencia clara en los assets de marca. Por pedido explícito: NO se deriva ninguna rampa ni se define rojo/verde por ahora — se espera el tokens.css original del colega. 1) Colores de marca SIN ROL asignado todavía (existen como primitivo arriba,pero nada en el código/README dice para qué son): --brand-clay-alt (#D27842),--brand-blue (#3F5EAA),--brand-sky (#97C9DD) 2) Rampas numeradas que el código pide (--clay-50/400/700,--sage-100/200/300/400/800,--amber/--violet/--info -tint/-mid/-strong,--color-accent-hover/-tint/-vivid,--color-text/-text-secondary/-text-muted,--color-surface/-surface-2/-elevated/-border/-border-strong/-overlay/-scrim/ -focus/-text-on-accent,--focus-ring): sin definir,a la espera del archivo original — no se calculan tintes/sombras acá. 3) Rojo (crítico) y verde (éxito): NINGÚN hex de la paleta de marca es rojo o verde. Se resuelve cuando vuelva el tokens.css del colega. Texturas (TEXTURAS @font-face {font-family: "PP Fragment"; src: url(/assets/PPFragment-GlareLight-DR2FiWN3.woff2) format("woff2"); font-weight: 300; font-style: normal; font-display: swap;} @font-face {font-family: "PP Fragment"; src: url(/assets/PPFragment-GlareRegular-VsBSPGDf.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap;} @font-face {font-family: "PP Fragment"; src: url(/assets/PPFragment-GlareExtraBold-Dze-H-yM.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap;} @font-face {font-family: "Highway Gothic"; src: url(/assets/HighwayGothicExpanded-QUCQnaqv.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap;} *,*::before,*::after {box-sizing: border-box;} html,body {margin: 0; padding: 0;} body {min-height: 100vh; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--type-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;} #app {min-height: 100vh;} a {color: var(--color-accent); text-decoration: none;} button {font-family: inherit;} :focus-visible {outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm);} .num,.data,time {font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;}){}