/* ========================================================================== * Blokmark · Design tokens (--tnt-*) — the contract read by Blokino. * Colors are linked to the theme.json presets (hex fallback = the same value), * so a Style Variation that redefines the palette recolors everything, * including the engine's effects. Keep the hex in sync with theme.json. * ========================================================================== */ :root { /* ---- COLOR — "Chalk" ---- */ --tnt-color-bg: var(--wp--preset--color--bg, #F7F6F2); /* Chalk */ --tnt-color-surface: var(--wp--preset--color--surface, #FFFFFF); /* Paper */ --tnt-color-text: var(--wp--preset--color--foreground, #16181D); /* Ink */ --tnt-color-text-muted: var(--wp--preset--color--text-muted, #5E6470); /* Graphite */ --tnt-color-primary: var(--wp--preset--color--primary, #16181D); /* buttons = Ink */ --tnt-color-accent: var(--wp--preset--color--accent, #FF6B2C); /* Marker */ --tnt-color-accent-2: var(--wp--preset--color--accent-2, #FFE1D3); /* Marker tint (the ) */ --tnt-color-border: var(--wp--preset--color--line, #E3E1DA); /* Line */ --ts-color-link: var(--wp--preset--color--link-text, #B93F14); /* Marker deep (AA on Chalk, task 11: C9471A measured 4.41:1, failed) */ /* Text painted ON --tnt-color-primary / --tnt-color-text backgrounds (core buttons, outline hover, Woo buttons). Linked, so a variation that flips primary to light (Midnight) also flips this to dark. NOT --tnt-color-on-ink: that one is fixed chalk and only belongs on the fixed --tnt-color-ink. */ --ts-color-on-primary: var(--wp--preset--color--on-primary, #F7F6F2); /* Always-dark panels: FIXED (not linked), so variations never invert them. */ --tnt-color-ink: #16181D; --tnt-color-on-ink: #F7F6F2; /* ---- TYPOGRAPHY ---- */ --tnt-font-display: 'Gabarito', 'Segoe UI', system-ui, -apple-system, sans-serif; --tnt-font-body: 'Albert Sans', 'Segoe UI', system-ui, -apple-system, sans-serif; --tnt-font-mono: 'Azeret Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; --tnt-text-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); --tnt-text-sm: clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem); --tnt-text-base: clamp(1.0625rem, 1.02rem + 0.2vw, 1.125rem); --tnt-text-md: clamp(1.25rem, 1.16rem + 0.45vw, 1.5rem); --tnt-text-lg: clamp(1.5rem, 1.34rem + 0.8vw, 2rem); --tnt-text-xl: clamp(2rem, 1.55rem + 2.2vw, 3.25rem); --tnt-text-2xl: clamp(2.75rem, 1.9rem + 4.3vw, 5.5rem); /* hero display */ --tnt-leading-tight: 1.0; --tnt-leading-body: 1.6; --tnt-tracking-tight: -0.03em; --tnt-tracking-wide: 0.08em; /* ---- Theme-only helpers ---- */ --ts-gutter: clamp(1rem, 4vw, 2.5rem); --ts-radius-card: 14px; --ts-radius-btn: 10px; --ts-radius-photo: 20px; /* ---------------------------------------------------------------------- ESPACIO (escala fluida 1..12) ---------------------------------------------------------------------- */ --tnt-space-1: clamp(0.25rem, 0.24rem + 0.05vw, 0.3125rem); --tnt-space-2: clamp(0.5rem, 0.48rem + 0.1vw, 0.625rem); --tnt-space-3: clamp(0.75rem, 0.71rem + 0.2vw, 0.9375rem); --tnt-space-4: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); --tnt-space-5: clamp(1.5rem, 1.4rem + 0.5vw, 2rem); --tnt-space-6: clamp(2rem, 1.8rem + 1vw, 3rem); --tnt-space-7: clamp(2.5rem, 2.1rem + 2vw, 4rem); --tnt-space-8: clamp(3rem, 2.4rem + 3vw, 5rem); --tnt-space-9: clamp(4rem, 3.2rem + 4vw, 7rem); --tnt-space-10: clamp(5rem, 3.8rem + 6vw, 9rem); --tnt-space-11: clamp(6rem, 4.4rem + 8vw, 12rem); --tnt-space-12: clamp(8rem, 5.6rem + 12vw, 16rem); /* ---------------------------------------------------------------------- FORMA: radios y sombras multicapa (nada plano, ver §7.3) ---------------------------------------------------------------------- */ --tnt-radius-sm: 0.375rem; --tnt-radius-md: 0.75rem; --tnt-radius-lg: 1.25rem; --tnt-radius-pill: 999px; --tnt-shadow-1: 0 1px 2px rgba(16, 18, 23, 0.04), 0 1px 1px rgba(16, 18, 23, 0.06); --tnt-shadow-2: 0 4px 6px rgba(16, 18, 23, 0.05), 0 10px 20px rgba(16, 18, 23, 0.06), 0 2px 4px rgba(16, 18, 23, 0.04); --tnt-shadow-3: 0 8px 16px rgba(16, 18, 23, 0.06), 0 24px 48px rgba(16, 18, 23, 0.10), 0 2px 8px rgba(16, 18, 23, 0.05); /* ---------------------------------------------------------------------- MOVIMIENTO (consumido por el runtime de efectos del motor) Nunca linear salvo loops continuos. Curvas reales, no genéricas. ---------------------------------------------------------------------- */ --tnt-ease-expo: cubic-bezier(0.16, 1, 0.3, 1); --tnt-ease-power3: cubic-bezier(0.215, 0.61, 0.355, 1); --tnt-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --tnt-ease-circ: cubic-bezier(0.85, 0, 0.15, 1); --tnt-dur-fast: 200ms; --tnt-dur-base: 400ms; --tnt-dur-slow: 700ms; } /* El motor respeta esto a nivel de runtime; el contrato lo declara también para CSS puro: si el usuario prefiere menos movimiento, las duraciones tienden a 0 y el contenido queda visible y estático (§4.3, §10). */ @media (prefers-reduced-motion: reduce) { :root { --tnt-dur-fast: 0.01ms; --tnt-dur-base: 0.01ms; --tnt-dur-slow: 0.01ms; } } /* ---- Compatibility: palette slugs renamed (2026-09-26) ---------------------- The slugs `text` and `border` collided with WordPress' generic block classes: WP printed `.has-text-color{color:var(--wp--preset--color--text)!important}`, and `has-text-color` is the class it adds to ANY block with a text colour, so a colour the user picked never applied (same for `has-border-color`). They are now `foreground` and `line`. Content saved with the old slugs keeps its colour through these aliases; the generic `.has-text-color` / `.has-border-color` are deliberately NOT aliased (that was the bug). */ :root { --wp--preset--color--text: var(--wp--preset--color--foreground); --wp--preset--color--border: var(--wp--preset--color--line); --wp--preset--color--link: var(--wp--preset--color--link-text); } .has-text-background-color { background-color: var(--wp--preset--color--foreground) !important; } .has-text-border-color { border-color: var(--wp--preset--color--foreground) !important; } .has-border-background-color { background-color: var(--wp--preset--color--line) !important; } .has-border-border-color { border-color: var(--wp--preset--color--line) !important; } .has-link-background-color { background-color: var(--wp--preset--color--link-text) !important; } .has-link-border-color { border-color: var(--wp--preset--color--link-text) !important; }