/* ══════════════════════════════════════════════════════════════════════════ TOKENS — la única capa del panel donde se escribe un valor literal. De aquí hacia arriba —atoms, molecules, organisms y las pantallas— nadie vuelve a escribir un color, un radio ni un espacio a mano: se consume el token ([05 §1](../../../../../general/rules/05-design-system.md#1-principio-fundamental-todo-pasa-por-tokens)). Y se guarda en DOS niveles, que es lo que separa «temeable de verdad» de «temeable en teoría» ([05 §5.3](../../../../../general/rules/05-design-system.md#53-anatomía-de-los-tokens-crudos--roles-obligatorio)): 1. CRUDOS — la paleta pura, sin opinión. No dicen para qué sirven. 2. DE ROL — el significado, apuntando a un crudo. **Los componentes consumen SOLO los de rol.** Un `--cyan-400` escrito fuera de este archivo es un fallo de diseño, no un atajo: cambiar de marca deja de ser repuntar diez roles y vuelve a ser buscar y reemplazar por todas partes. Que esa separación estaba bien hecha se comprobó al cambiar de marca: este archivo se reescribió entero —de un vino sobre papel a un azul espacial— y NINGUNA otra hoja se tocó. Los nombres de rol son los mismos de antes, y por eso ninguna pieza se enteró. ── DE DÓNDE SALE ESTA PALETA ─────────────────────────────────────────────── Del panel de **fines** (`packages/design/tokens/tokens.json`), que ya tiene la identidad del emprendimiento resuelta: azul marino muy oscuro con acento cian. Los valores son los suyos, exactos, no una aproximación de memoria — dos paneles del mismo dueño que se parecen «bastante» se ven peor que dos que no se parecen en nada. ── UN SOLO TEMA, Y A PROPÓSITO ───────────────────────────────────────────── Aquí no hay claro/oscuro ni interruptor. Esto es un panel oscuro y ya. Lo hubo, y se quitó: sostener dos temas cuesta el doble en cada pieza nueva —hay que mirar las dos— y el claro nunca fue la identidad de la casa, era una opción que existía porque el armazón la traía. Un tema que nadie defiende se degrada sin que nadie lo note. La paleta clara vivía en este mismo archivo y está en el historial, así que volver a tenerla es recuperar un bloque, no rehacer un trabajo. El día que vuelva, vuelve con los tres estados que pide el sistema de diseño: `:root`, la consulta de medios protegida y el atributo explícito. ── POR QUÉ NO HAY `tokens.json` ───────────────────────────────────────────── Porque hay UN destino: CSS. El JSON neutro y su compilador existen para que dos destinos —un `.dart` y un `.css`— salgan del mismo origen, y montarlos con un solo destino sería una tubería que traduce de CSS a CSS. Se monta el día que aparezca el segundo ([05 §5.2 punto 4](../../../../../general/rules/05-design-system.md#52-dónde-vive-packagesdesign--fuente-de-tokens--un-paquete-por-consumidor)). Hasta entonces, la fuente de verdad es este archivo. ══════════════════════════════════════════════════════════════════════════ */ :root { color-scheme: dark; /* ──────────────────────────────────────────────────────────────────────── 1 · CRUDOS Valores y nada más. Ninguno de estos se usa fuera de este archivo. ──────────────────────────────────────────────────────────────────────── */ /* Cian — el acento de la marca. El 400 es el de fines tal cual. */ --cyan-300: #7fe4ff; --cyan-400: #4fd7ff; --cyan-900: #0e3348; --cyan-950: #08202e; /* Azul y violeta — no se usan como color de nada. Son dos de los tres resplandores del fondo espacial, y solo aparecen ahí. */ --blue-500: #3f7dff; --violet-500: #8f7aff; /* Marino — los neutros. Azul de verdad, no gris azulado: al lado del cian un gris neutro se ve muerto. */ --navy-500: #6e86ac; --navy-700: #12244a; --navy-800: #0c1a34; --navy-900: #081228; --navy-950: #040b18; --navy-ink: #eaf4ff; --navy-mist: #a7bedf; /* Las líneas no son un color opaco: son luz azul muy baja. Un borde sólido sobre un fondo con resplandores se ve pegado encima en vez de dentro. */ --glow-line: rgba(130, 180, 255, .16); --glow-line-strong: rgba(130, 180, 255, .30); /* Menta — lo que salió bien. */ --mint-300: #7af0c5; --mint-900: #0c3a2c; /* Coral — lo que pide atención o salió mal. */ --coral-300: #ef5350; --coral-900: #3d1a1a; /* Ámbar — lo que está en curso, a medio hacer. */ --amber-300: #f2c14e; --amber-900: #3d2f0f; /* Escala de aire. Múltiplos de 4 salvo el primero, que es el pelo. */ --size-1: 2px; --size-2: 4px; --size-3: 8px; --size-4: 12px; --size-5: 16px; --size-6: 24px; --size-7: 32px; --size-8: 48px; /* Forma. Generosos y pocos: tres radios y el círculo. */ --round-1: 8px; --round-2: 12px; --round-3: 18px; --round-full: 999px; /* Profundidad. Sobre un lienzo oscuro la sombra no separa por contraste —negro sobre negro no se ve— pero sí asienta: sin ella las tarjetas flotan recortadas. */ --lift-1: 0 1px 2px rgba(0, 0, 0, .3); --lift-2: 0 2px 4px rgba(0, 0, 0, .3), 0 8px 20px rgba(0, 0, 0, .4); --lift-3: 0 4px 8px rgba(0, 0, 0, .35), 0 18px 44px rgba(0, 0, 0, .5); /* Movimiento. Corto o no se percibe; largo y estorba. */ --tick-1: 120ms; --tick-2: 200ms; --tick-3: 320ms; --curve: cubic-bezier(.2, .8, .3, 1); /* Letra. */ --face-ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --face-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --pt-1: 10.5px; --pt-2: 11.5px; --pt-3: 12.5px; --pt-4: 13.5px; --pt-5: 15px; --pt-6: 18px; --pt-7: 22px; --pt-8: 28px; /* * El cielo. Es el ÚNICO degradado del panel y solo se pinta en el lienzo. * * Seis estrellas tenues y tres resplandores —cian arriba a la izquierda, * violeta arriba a la derecha, azul abajo—, fijos, para que no se desplacen * con el contenido. Es lo que separa «azul oscuro» de «espacial», y la razón * de que la prohibición de degradados se acotara en vez de levantarse: aquí * el degradado ES el fondo, no el adorno de una pieza. */ --sky-dark: radial-gradient(1.5px 1.5px at 22% 28%, rgba(255, 255, 255, .5), transparent 100%), radial-gradient(1.5px 1.5px at 68% 58%, rgba(255, 255, 255, .35), transparent 100%), radial-gradient(1.5px 1.5px at 42% 82%, rgba(255, 255, 255, .3), transparent 100%), radial-gradient(1.5px 1.5px at 85% 20%, rgba(255, 255, 255, .4), transparent 100%), radial-gradient(1.5px 1.5px at 12% 66%, rgba(255, 255, 255, .28), transparent 100%), radial-gradient(1.5px 1.5px at 55% 12%, rgba(255, 255, 255, .32), transparent 100%), radial-gradient(1100px 700px at 18% -10%, rgba(79, 215, 255, .1), transparent 60%), radial-gradient(900px 600px at 100% 0%, rgba(143, 122, 255, .14), transparent 55%), radial-gradient(1000px 800px at 50% 120%, rgba(63, 125, 255, .12), transparent 60%); /* ──────────────────────────────────────────────────────────────────────── 2 · DE ROL — lo único que se consume desde fuera. ──────────────────────────────────────────────────────────────────────── */ --color-canvas: var(--navy-950); --color-surface: var(--navy-900); --color-surface-sunk: var(--navy-800); --color-surface-deep: var(--navy-700); --color-ink: var(--navy-ink); --color-ink-soft: var(--navy-mist); --color-ink-faint: var(--navy-500); --color-line: var(--glow-line); --color-line-strong: var(--glow-line-strong); --color-accent: var(--cyan-400); --color-accent-strong: var(--cyan-300); /* La letra encima del acento sale del PAPEL, no de un blanco fijo: el acento es un cian claro, y un blanco encima sería ilegible sin que nada avisara. */ --color-accent-ink: var(--navy-950); --color-accent-tint: var(--cyan-900); --color-accent-wash: var(--cyan-950); --color-ok: var(--mint-300); --color-ok-tint: var(--mint-900); --color-danger: var(--coral-300); --color-danger-tint: var(--coral-900); --color-warn: var(--amber-300); --color-warn-tint: var(--amber-900); --color-focus: var(--cyan-400); --color-veil: rgba(2, 6, 15, .66); --color-sky: var(--sky-dark); --radius-sm: var(--round-1); --radius-md: var(--round-2); --radius-lg: var(--round-3); --radius-full: var(--round-full); --space-1: var(--size-1); --space-2: var(--size-2); --space-3: var(--size-3); --space-4: var(--size-4); --space-5: var(--size-5); --space-6: var(--size-6); --space-7: var(--size-7); --space-8: var(--size-8); --shadow-1: var(--lift-1); --shadow-2: var(--lift-2); --shadow-3: var(--lift-3); --motion-fast: var(--tick-1); --motion-base: var(--tick-2); --motion-slow: var(--tick-3); --motion-ease: var(--curve); --font-ui: var(--face-ui); --font-mono: var(--face-mono); --text-2xs: var(--pt-1); --text-xs: var(--pt-2); --text-sm: var(--pt-3); --text-md: var(--pt-4); --text-lg: var(--pt-5); --text-xl: var(--pt-6); --text-2xl: var(--pt-7); --text-3xl: var(--pt-8); --weight-normal: 400; --weight-medium: 550; --weight-semibold: 650; --weight-bold: 750; }