/* ───────────────────────────────────────────────────────────────────────────── FLMM Design System · Grafito · tokens Fuente de verdad: flmm-hub/design-system/tokens.css NO EDITAR ESTE ARCHIVO EN LOS PRODUCTOS. Se edita en el hub y se copia. Ver docs/DESIGN-SYSTEM.md. Dos decisiones que explican todo lo demás: 1. OKLCH, no HSL. En HSL dos colores con la misma "L" se ven con brillos distintos según el tono — por eso un tablero con seis acentos parecía un semáforo. En OKLCH la L es brillo percibido de verdad, así que los seis brand comparten L y C y solo cambian de tono: se ven como familia. 2. `light-dark()`, no dos bloques. El valor se resuelve según el `color-scheme` que esté activo, así que hay UN token por concepto en vez de uno claro y otro oscuro que se desincronizan. ──────────────────────────────────────────────────────────────────────────── */ :root { /* Sin esto `light-dark()` no resuelve nada. El override por tema está abajo. */ color-scheme: light dark; /* ── Superficies ──────────────────────────────────────────────────────────── En claro la app es blanca y la jerarquía la dan los bordes, no las sombras. En oscuro sí hay un escalón entre lienzo y tarjeta, porque ahí el borde solo no alcanza. */ --background: light-dark(oklch(100% 0 0), oklch(14% 0.004 260)); --foreground: light-dark(oklch(18% 0.004 260), oklch(97% 0.002 250)); --card: light-dark(oklch(100% 0 0), oklch(17% 0.005 260)); --card-foreground: light-dark(oklch(18% 0.004 260), oklch(97% 0.002 250)); --popover: light-dark(oklch(100% 0 0), oklch(19% 0.005 260)); --popover-foreground:light-dark(oklch(18% 0.004 260), oklch(97% 0.002 250)); /* ── Primary ──────────────────────────────────────────────────────────────── Monocromo a propósito: casi negro en claro, casi blanco en oscuro. El color de una pantalla no dice "esto es lo importante" sino "estás en tal herramienta", y eso lo dice `--brand`. */ --primary: light-dark(oklch(18% 0.004 260), oklch(97% 0.002 250)); --primary-foreground: light-dark(oklch(99% 0 0), oklch(14% 0.004 260)); /* ── Neutros de apoyo ─────────────────────────────────────────────────────── */ --secondary: light-dark(oklch(96.5% 0.002 250), oklch(22% 0.006 258)); --secondary-foreground: light-dark(oklch(25% 0.006 260), oklch(95% 0.002 250)); --muted: light-dark(oklch(96.5% 0.002 250), oklch(22% 0.006 258)); --muted-foreground: light-dark(oklch(52% 0.008 260), oklch(65% 0.012 258)); --accent: light-dark(oklch(96.5% 0.002 250), oklch(22% 0.006 258)); --accent-foreground: light-dark(oklch(25% 0.006 260), oklch(95% 0.002 250)); /* ── Semánticos ───────────────────────────────────────────────────────────── Los cuatro comparten L y C dentro de cada tema: ninguno grita más que otro por accidente de tono. */ --destructive: light-dark(oklch(55% 0.20 27), oklch(70% 0.17 25)); --destructive-foreground: light-dark(oklch(99% 0 0), oklch(14% 0.004 260)); --success: light-dark(oklch(55% 0.14 150), oklch(70% 0.15 150)); --success-foreground: light-dark(oklch(99% 0 0), oklch(14% 0.004 260)); --warning: light-dark(oklch(55% 0.14 70), oklch(70% 0.15 75)); --warning-foreground: light-dark(oklch(99% 0 0), oklch(14% 0.004 260)); --info: light-dark(oklch(55% 0.14 255), oklch(70% 0.15 255)); --info-foreground: light-dark(oklch(99% 0 0), oklch(14% 0.004 260)); /* ── Bordes y foco ────────────────────────────────────────────────────────── `border` es la línea estructural (1px, sin sombra) e `input` es un punto más marcada, porque un campo tiene que leerse como algo en lo que se escribe. */ --border: light-dark(oklch(92% 0.003 250), oklch(26% 0.008 258)); --input: light-dark(oklch(87% 0.004 250), oklch(32% 0.010 258)); --ring: light-dark(oklch(18% 0.004 260), oklch(97% 0.002 250)); /* ── Forma ────────────────────────────────────────────────────────────────── 6px. Suficiente para no ser una caja dura, poco para no ser una burbuja. */ --radius: 0.375rem; /* ── Brand ────────────────────────────────────────────────────────────────── El único token que cambia por producto. Todos comparten L y C; solo cambia el tono, y por eso se ven como una familia. Los valores de cada uno están en docs/DESIGN-SYSTEM.md y deben coincidir con `hub_tools.accent`. Por defecto (hub) es el índigo de la marca. */ --brand: light-dark(oklch(62% 0.16 275), oklch(70% 0.16 275)); --brand-foreground: light-dark(oklch(99% 0 0), oklch(14% 0.004 260)); /* ── Series de datos ──────────────────────────────────────────────────────── Para gráficos y para cualquier conjunto donde el color distingue elementos sin jerarquía entre ellos. Seis tonos repartidos por el círculo con la misma L y la misma C: es lo que hace que una serie no parezca más importante que otra solo por su tono. En oscuro suben de luminosidad, no de saturación. Se usan con `var(--chart-1)`, también desde librerías de gráficos. */ --chart-1: light-dark(oklch(58% 0.15 250), oklch(70% 0.15 250)); --chart-2: light-dark(oklch(58% 0.15 30), oklch(70% 0.15 30)); --chart-3: light-dark(oklch(58% 0.15 160), oklch(70% 0.15 160)); --chart-4: light-dark(oklch(58% 0.15 300), oklch(70% 0.15 300)); --chart-5: light-dark(oklch(58% 0.15 90), oklch(70% 0.15 90)); --chart-6: light-dark(oklch(58% 0.15 200), oklch(70% 0.15 200)); /* Versión suave del brand, para fondos de badge y estados seleccionados. Se deriva del brand con color-mix, así que cambiar el tono del producto arrastra también sus fondos: no hay un segundo valor que mantener. */ --brand-soft: color-mix(in oklab, var(--brand) 12%, var(--background)); --brand-ink: color-mix(in oklab, var(--brand) 82%, var(--foreground)); } /* El toggle de tema escribe estos atributos. Tienen que ganarle a la preferencia del sistema en las dos direcciones, no solo hacia oscuro. */ :root[data-theme='light'] { color-scheme: light; } :root[data-theme='dark'] { color-scheme: dark; }