/* ============================================================================= Glotus — Design tokens (canonical · single source of truth) ----------------------------------------------------------------------------- Fuente única, agnóstica al consumidor. Reemplaza: · tokens.css v13 · variables de colors_and_type.css (capa semántica) · primitives del Pre-SCSS bridge v1.3 ($glotus-* en SCSS) · aliases locales del Post-SCSS v1.5 ($g-* en moodle-header.scss) · custom-props embebidas en los artifacts HTML (Piezas 02/03/04/09) Este archivo NO contiene aliases hacia frameworks consumidores. Los puentes viven en archivos separados con responsabilidades acotadas: · glotus-bootstrap-bridge.css → mapeo a vars Bootstrap (Moodle/Boost Union) · glotus-wordpress-bridge.css → mapeo a vars del theme WP (cuando se monte) Convenciones (todas con prefijo `--glotus-` para evitar colisiones con Bootstrap, Boost Union y plugins de WordPress): · Color primitivo .......... --glotus-{family}-{shade} teal-650, coral-400, ink-900 · Color semántico .......... --glotus-color-{role} color-primary, color-accent · Surface / fg semántico ... --glotus-{bg|fg}-{role} bg, fg-primary, bg-elevated · Tipografía ............... --glotus-font-{slot} font-sans, font-weight-semibold, fs-h1 · Espaciado ................ --glotus-space-{n} space-1..space-10 · Radii .................... --glotus-radius-{n|pill} · Sombras .................. --glotus-shadow-{n|focus} · Motion ................... --glotus-{duration|ease}-{role} Reglas de estilo (selectores con propiedades) NO viven en este archivo. Sólo declaraciones de variables. Changelog · v14.2 (2026-06-11) — restored: WhatsApp primitive + semantic (lost during v14 rewrite, not an amendment). Re-añadidos --glotus-whatsapp (#25D366) en §1 y --glotus-color-whatsapp en §2, en sus posiciones canónicas. Es restauración del sub-patrón cromático D1 (único color externo permitido en la paleta), no una amendment: el bloque no debió moverse en el rewrite v14 y AMENDMENTS.md no lo registra. Único cambio de v14.2; A1/A2/A3 y el resto del paquete quedan intactos. · v14 (2026-06-11) — paquete amendments A1+A2+A3 (ver AMENDMENTS.md): A1 · nuevo primitivo --glotus-coral-575 (#C8533F, hover/press climax CTA) + semántico --glotus-color-accent-hover. A2 · sombras 1/2/3 con tinte umber rgba(46,32,18,α) en vez de ink neutro. A3 · warm ink: ink-900 #181818→#1C1915 · ink-600 #555555→#5A554C · ink-400 #888888→#8C867B. ink-700 (#3D3A33) ya era warm de origen y se verificó perceptualmente coherente con el nuevo ink-900: se mantiene. · v13 (2026-05-10) — consolidación inicial (identidad locked). ============================================================================= */ :root { /* ─── 1. CROMÁTICOS · PRIMITIVOS ───────────────────────────────────────── Sistema de doble track: tokens 400/500 son GRÁFICOS (vibrantes, no necesitan AA); 550/650 son TIPOGRÁFICOS (AA sobre paper); 600/700 son RESERVA para body text que exige AA-normal. Ver DESIGN.md v13 §Color. */ /* Teal — primario */ --glotus-teal-500: #008989; /* graphic — isotipo, ilustración */ --glotus-teal-650: #007878; /* typographic — wordmark "Glot", headings, UI primary (AA 4.97:1) */ --glotus-teal-700: #006D6D; /* reserve — body text (AAA 6.32:1) */ /* Coral — acento */ --glotus-coral-400: #FB6E5F; /* graphic — isotipo, ilustración */ --glotus-coral-550: #E05E4C; /* typographic — wordmark "us", énfasis (AA-large 3.35:1) */ --glotus-coral-575: #C8533F; /* interaction — hover/press del climax CTA (amendment A1) */ --glotus-coral-600: #CC3F2A; /* reserve — body text (AA 4.69:1) */ --glotus-coral-700: #A8412F; /* deep — texto de pills sobre tint coral (ver pieces 03 + 09) */ /* Neutrales — paper / bone / ink */ --glotus-paper: #FAF7F2; /* fondo principal de marca */ --glotus-bone: #F0EBE2; /* superficies secundarias, bordes hairline */ --glotus-ink-400: #8C867B; /* placeholder, texto terciario */ --glotus-ink-600: #5A554C; /* texto secundario, metadata */ --glotus-ink-700: #3D3A33; /* body warm-dark alternativo (cuando ink-900 quema) */ --glotus-ink-900: #1C1915; /* texto principal, superficies invertidas */ /* WhatsApp — excepción cromática canónica del sistema (sub-patrón D1). Verde de marca WhatsApp: la única afordancia externa permitida en la paleta. Funcional, NO tipográfico — jamás para texto de UI. Tokenizado (25/05) para que stylelint con `declaration-strict-value` no rechace el #25D366 suelto en el bridge WP. Consumido vía el semántico de §2, nunca directo. */ --glotus-whatsapp: #25D366; /* Superficie blanca pura — sólo para UI elevada (cards, modals, inputs). Nunca como fondo de marketing surface; ahí va paper. Decisión consciente de mantenerlo como token: aunque hoy mapea a #FFFFFF literal, vive acá para centralizar futuros ajustes (off-white templado, tint cool para dark surfaces invertidas, etc.) sin tener que cazar literales sueltos por toda la base. */ --glotus-white: #FFFFFF; /* Bordes — primitivo de borde visible (más definido que bone) */ --glotus-border-line: #E2DCD0; /* Estados de feedback (success / warning / error / info) sin definir en sistema todavía. Se diseñan como sistema completo cuando se necesiten: paleta cromática propia, jerarquía AA, tints de superficie, iconografía. YAGNI hasta que aparezca un caso de uso real. No reintroducir tokens sueltos acá; ese es el camino al alias-soup. NOTA: "acción destructiva" ≠ "feedback de error". La primera (logout, delete) sí existe en el sistema actual y vive en §2 como `--glotus-color-destructive`. Cuando se diseñe el sistema de feedback, `error` tendrá cromática propia y no debe colapsarse con destructive. */ /* ─── 2. CROMÁTICOS · SEMÁNTICOS ───────────────────────────────────────── Capa funcional. Las hojas downstream consumen ESTOS, no los primitivos, excepto para tokens decorativos puntuales (fills de SVG, etc.). */ /* Surfaces */ --glotus-bg: var(--glotus-paper); --glotus-bg-elevated: var(--glotus-white); /* cards, modales, dropdowns */ --glotus-bg-sunken: var(--glotus-bone); /* paneles secundarios, code blocks */ --glotus-bg-dark: var(--glotus-ink-900); /* secciones invertidas */ /* Foreground (texto) */ --glotus-fg-primary: var(--glotus-ink-900); --glotus-fg-secondary: var(--glotus-ink-600); --glotus-fg-tertiary: var(--glotus-ink-400); /* placeholder, disabled, micro-copy */ --glotus-fg-on-dark: var(--glotus-paper); --glotus-fg-on-dark-muted: rgba(250, 247, 242, 0.65); /* Brand — roles funcionales mapeados a primitivos */ --glotus-color-primary: var(--glotus-teal-650); /* fills, links, headings */ --glotus-color-primary-graphic: var(--glotus-teal-500); /* iconos, isotipo */ --glotus-color-primary-deep: var(--glotus-teal-700); /* hover, body sobre paper */ --glotus-color-accent: var(--glotus-coral-550); /* énfasis, climax CTA fill */ --glotus-color-accent-hover: var(--glotus-coral-575); /* hover/press del climax CTA (A1) */ --glotus-color-accent-graphic: var(--glotus-coral-400); /* iconos, isotipo, low-friction CTA */ --glotus-color-accent-deep: var(--glotus-coral-600); /* texto coral sobre paper (AA) */ /* Acción destructiva — NO es feedback de error. Token semántico para consecuencias irreversibles disparadas por el usuario: logout, delete account, remove member, cancel subscription. Caso documentado actual: texto de logout en moodle-header (coral-600). Distinto de "feedback de error" (comunicación del sistema sobre algo que pasó: form validation, request failure, 500). Ese sistema vive en la sección de feedback states aún no diseñada — ver §1. No reusar este token para esos casos: cuando aparezca el sistema de feedback, `error` puede tener cromática propia distinta a destructive. */ --glotus-color-destructive: var(--glotus-coral-600); /* WhatsApp — semántico de la excepción cromática D1 (ver primitivo en §1). Único color externo a la paleta de marca. Las hojas downstream lo consumen por nombre (bridge WP: `.whatsapp-link`, `a.is-style-whatsapp`), nunca el primitivo suelto. Afordancia de contacto funcional, no texto de marca. */ --glotus-color-whatsapp: var(--glotus-whatsapp); /* Bordes — semánticos */ --glotus-border-hairline: var(--glotus-bone); /* card edges en paper */ --glotus-border-visible: var(--glotus-border-line); /* inputs, dividers prominentes */ --glotus-border-strong: var(--glotus-ink-900); /* acentos de alto contraste */ /* Focus ring — decisión de marca, no técnica local. Vive como token (no como literal en cada selector) para mantener consistencia entre los siete grupos de selectores donde aparece: inputs, buttons, links, chips, cards clicables, tabs, menu-items. Si la opacidad o el hue cambian en review de accesibilidad, cambia acá y todos los focus rings del sistema se mueven en bloque. */ --glotus-focus-ring: rgba(0, 120, 120, 0.25); /* teal-650 @ 25% */ --glotus-focus-ring-accent: rgba(224, 94, 76, 0.28); /* coral-550 @ 28% — climax CTA */ /* ::selection NO tiene token propio. La regla `::selection { ... }` se declara directamente en la hoja semántica reutilizando los tokens cromáticos canónicos (coral-550 sobre paper). Un token intermedio sería indirección sin ganancia. */ /* ─── 3. TIPOGRAFÍA ────────────────────────────────────────────────────── Tres familias. Pesos angostos y deliberados. */ /* Familias */ --glotus-font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --glotus-font-serif: 'Fraunces', Georgia, "Times New Roman", serif; --glotus-font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace; /* Pesos canónicos Plus Jakarta Sans: cargados 200..800 + itálicas; en uso 400 / 500 / 600. Fraunces: variable cargada 400..600; preferido 500. JetBrains Mono: 400 / 500. */ --glotus-font-weight-regular: 400; --glotus-font-weight-medium: 500; --glotus-font-weight-semibold: 600; /* Optical sizing — APLICA SÓLO A FRAUNCES (eje `opsz` 9..144). Plus Jakarta Sans y JetBrains Mono no tienen eje opsz; aplicarles `font-variation-settings: "opsz" ...` es no-op (en el mejor caso) o activa fallback raro en algunos engines. Mantener los settings dentro de selectores que apunten a `font-family: var(--glotus-font-serif)`. Decisión deliberada de tres stops por contexto (no escala continua): · ui → 14 labels en serif (raro, casi sólo eyebrow editorial) · 24 → 24 subheads de sección · editorial → 48 aperturas, hero copy de marketing · display → 144 display extremo, números grandes editoriales Uso: h2.editorial { font-family: var(--glotus-font-serif); font-variation-settings: 'opsz' var(--glotus-font-opsz-editorial); } O auto, dejando que el browser elija por px: .editorial { font-optical-sizing: auto; } */ --glotus-font-opsz-ui: 14; --glotus-font-opsz-subhead: 24; --glotus-font-opsz-editorial: 48; --glotus-font-opsz-display: 144; /* Escala tipográfica · base 16px */ --glotus-fs-display: 72px; /* hero / editorial / display1 BS */ --glotus-fs-h1: 48px; --glotus-fs-h2: 32px; --glotus-fs-h3: 24px; --glotus-fs-h4: 20px; --glotus-fs-h5: 18px; --glotus-fs-body: 16px; --glotus-fs-sm: 14px; --glotus-fs-xs: 12px; --glotus-fs-meta: 11px; /* JetBrains Mono uppercase */ /* Line-heights — usar siempre por nombre, no por número */ --glotus-lh-tight: 1.05; /* display, h1 editorial */ --glotus-lh-snug: 1.2; /* h2..h4 */ --glotus-lh-base: 1.5; /* body */ --glotus-lh-loose: 1.7; /* long-form prose */ /* Letter-spacing — escala canónica (no improvisar valores fuera de esto) */ --glotus-ls-display: -0.025em; --glotus-ls-heading: -0.02em; --glotus-ls-snug: -0.015em; --glotus-ls-tight: -0.01em; --glotus-ls-meta: 0.08em; /* mono uppercase normal */ --glotus-ls-meta-wide: 0.12em; /* mono uppercase eyebrow */ /* ─── 4. ESPACIADO · escala 8px (4px en el primer stop) ────────────────── La marca respira: marketing usa space-9 (96) de vertical; producto baja a space-6 (32). Body-copy max-width = 64ch; marketing row max = 1200px. */ --glotus-space-1: 4px; --glotus-space-2: 8px; --glotus-space-3: 12px; --glotus-space-4: 16px; --glotus-space-5: 24px; --glotus-space-6: 32px; --glotus-space-7: 48px; --glotus-space-8: 64px; --glotus-space-9: 96px; --glotus-space-10: 128px; /* ─── 5. BORDER RADIUS ─────────────────────────────────────────────────── Modesto. La marca es geométrica, no soft. No agregar stops sin amendment. */ --glotus-radius-1: 4px; /* inputs, chips */ --glotus-radius-2: 8px; /* buttons, badges, alerts */ --glotus-radius-3: 12px; /* cards, dropdowns */ --glotus-radius-4: 20px; /* hero, modales grandes */ --glotus-radius-pill: 999px; /* avatares, pills reales */ /* ─── 6. SOMBRAS · warm-tinted, restraint ──────────────────────────────── Las cards sobre paper son típicamente bordeadas, no sombreadas. Las sombras quedan para modales, dropdowns y estado hover de grids clicables. */ --glotus-shadow-1: 0 1px 2px rgba(46, 32, 18, 0.05), 0 1px 1px rgba(46, 32, 18, 0.04); --glotus-shadow-2: 0 4px 12px rgba(46, 32, 18, 0.07), 0 1px 2px rgba(46, 32, 18, 0.05); --glotus-shadow-3: 0 12px 32px rgba(46, 32, 18, 0.10), 0 2px 4px rgba(46, 32, 18, 0.05); --glotus-shadow-focus: 0 0 0 3px var(--glotus-focus-ring); /* ─── 7. TRANSICIONES · timings + easings ──────────────────────────────── No bounces, no spring, no back-easing. La marca se mueve con intención. */ --glotus-duration-fast: 120ms; /* hover, press, color shifts */ --glotus-duration-base: 200ms; /* state transitions */ --glotus-duration-slow: 320ms; /* page-level enters */ --glotus-ease-standard: cubic-bezier(0.2, 0, 0, 1); /* default */ --glotus-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* solo enter */ /* ─── 8. MARCA · wordmark + lockup (ratios canónicos) ──────────────────── No tocar sin pasar por una amendment al DESIGN.md. Calibrados ópticamente. */ /* Wordmark — kerning interno */ --glotus-wordmark-letter-spacing: -0.025em; --glotus-wordmark-suffix-letter-spacing: -0.045em; --glotus-wordmark-suffix-margin-left: -0.018em; /* Lockup — multiplicadores sobre el font-size del wordmark */ --glotus-lockup-iso-ratio: 0.624; /* iso height = ratio × wordmark font-size */ --glotus-lockup-gap-ratio: 0.25; /* gap = ratio × wordmark font-size */ }