/* ===================================================================== Flor de Sal · Bridge · Brandbook v3 → tokens legados (--fs-*) --------------------------------------------------------------------- Este arquivo MAPEIA os tokens antigos `--fs-*` (espalhados em index.html · admin/style.css · playbook/playbook.css) para o Design System novo `--fds-*` (brandbook v3 aprovado por Endrigo em 26/05/2026). Vantagem: zero reescrita de classes. Importa este bridge depois do tokens.css e os componentes ganham automaticamente: · paleta nova (noite-mar + ouro #C9A96A PANT 4505C) · fontes editoriais (Italiana display · Marcellus títulos · Jost corpo) · escala tipográfica oficial · espaçamento e raio do brandbook Importa SEMPRE: tokens.css → bridge.css → (legados/inline existentes) ===================================================================== */ :root { /* ── ALIAS DE CORES · LEGADO → BRANDBOOK V3 ────────────────────── */ /* Areia · era #F5EDD8 família · vira família osso/areia oficial */ --fs-areia-50: var(--fds-osso); /* #F8F4EB */ --fs-areia-100: #EFE9DB; /* intermediário osso↔areia */ --fs-areia-200: var(--fds-areia); /* #E8E2D4 */ --fs-areia-300: #D9D2C0; /* areia escuro */ --fs-areia: var(--fds-areia); /* alias base */ /* Terra · era #6B4226 família · vira noite-mar família (escuros do brandbook) */ --fs-terra-200: #3D4A4F; /* texto muted dark */ --fs-terra-400: #1F3A3D; /* maré funda */ --fs-terra: var(--fds-noite-mar); /* #0F1A1F */ --fs-terra-deep: var(--fds-noite-mar); /* mesmo · sustenta tudo */ /* Musgo · era verde apoio · vira verde-maré do brandbook */ --fs-musgo-300: #9AAA9D; --fs-musgo: var(--fds-verde-mare); /* #7A8C7E */ --fs-musgo-deep: #5C6E60; /* Dourado · era #c7a453 (vendor) · vira #C9A96A oficial PANT 4505C */ --fs-dourado-200: var(--fds-ouro-claro); /* #DCC289 */ --fs-dourado: var(--fds-ouro-sais); /* #C9A96A · BRANDBOOK */ --fs-dourado-deep: #A88547; /* AA contrast over osso */ /* Escuros · todos consolidam em noite-mar */ --fs-escuro-600: #14222A; /* bg elevated */ --fs-escuro-800: #122029; /* intermediário */ --fs-escuro: var(--fds-noite-mar); /* #0F1A1F */ /* Brancos · viram família osso */ --fs-branco: var(--fds-osso); /* #F8F4EB */ --fs-branco-100: #EFE9DB; /* Vermelho · removido do brandbook v3 · mantido como variável morta */ --fs-vermelho: var(--fds-ouro-sais); /* fallback ouro · neutraliza vermelho legado */ /* ── ALIAS DE TIPOGRAFIA · LEGADO → BRANDBOOK V3 ────────────────── */ /* IMPORTANTE: Cormorant Garamond + Inter → Italiana + Marcellus + Jost */ --fs-font-display: var(--fds-font-display); /* Italiana · cover lines */ --fs-font-body: var(--fds-font-body); /* Jost · UI/copy */ --fs-font-mono: 'JetBrains Mono', 'Courier New', monospace; /* mantido pro admin */ /* Escala fluida · mantém compat com clamps existentes */ --fs-text-h1: clamp(2.5rem, 5vw, 4rem); --fs-text-h2: clamp(1.75rem, 3.5vw, 2.5rem); --fs-text-h3: clamp(1.25rem, 2.5vw, 1.75rem); --fs-text-sub: clamp(1rem, 2vw, 1.25rem); --fs-text-body: var(--fds-fs-body-sm); /* 0.9375rem · UI denso */ --fs-text-body-sm: 0.875rem; --fs-text-caption: 0.875rem; --fs-text-micro: 0.75rem; --fs-text-button: 0.8125rem; --fs-text-badge: var(--fds-fs-eyebrow); /* 0.8125rem */ /* Pesos */ --fs-weight-light: var(--fds-fw-light); /* 300 */ --fs-weight-regular: var(--fds-fw-regular); /* 400 */ --fs-weight-medium: var(--fds-fw-medium); /* 500 */ --fs-weight-semibold: 600; /* Line-height */ --fs-leading-tight: var(--fds-lh-tight); --fs-leading-snug: var(--fds-lh-snug); --fs-leading-normal: var(--fds-lh-normal); --fs-leading-relaxed: var(--fds-lh-loose); /* Tracking */ --fs-tracking-tight: var(--fds-tracking-tight); --fs-tracking-normal: var(--fds-tracking-normal); --fs-tracking-wide: var(--fds-tracking-wide); --fs-tracking-wider: var(--fds-tracking-wider); --fs-tracking-widest: var(--fds-tracking-widest); /* ── ALIAS DE ESPAÇAMENTO · LEGADO → BRANDBOOK V3 ──────────────── */ --fs-space-1: var(--fds-space-1); --fs-space-2: var(--fds-space-2); --fs-space-3: var(--fds-space-3); --fs-space-4: var(--fds-space-4); --fs-space-5: 1.25rem; --fs-space-6: var(--fds-space-5); /* 1.5rem */ --fs-space-8: var(--fds-space-6); /* 2rem */ --fs-space-10: 2.5rem; --fs-space-12: var(--fds-space-7); /* 3rem */ --fs-space-16: var(--fds-space-8); /* 4rem */ --fs-space-20: 5rem; --fs-space-24: var(--fds-space-9); /* 6rem */ --fs-space-32: var(--fds-space-10); /* 8rem */ --fs-section-y: clamp(4rem, 8vw, 6rem); --fs-section-x: var(--fs-space-16); --fs-card-pad: var(--fs-space-6); --fs-card-gap: var(--fs-space-6); --fs-btn-y: 0.875rem; --fs-btn-x: 2rem; --fs-btn-y-sm: 0.625rem; --fs-btn-x-sm: 1.25rem; /* ── ALIAS DE GRID ─────────────────────────────────────────────── */ --fs-container: var(--fds-container); /* 1200px */ --fs-container-narrow: 720px; --fs-gutter: var(--fds-gutter); --fs-gutter-md: 1.5rem; --fs-gutter-sm: 1rem; /* ── ALIAS DE RAIO ─────────────────────────────────────────────── */ --fs-radius-none: var(--fds-radius-none); --fs-radius-xs: var(--fds-radius-sm); --fs-radius-sm: var(--fds-radius-md); --fs-radius-md: var(--fds-radius-lg); --fs-radius-lg: 16px; --fs-radius-xl: 24px; --fs-radius-full: var(--fds-radius-pill); /* ── ALIAS DE BORDA ────────────────────────────────────────────── */ --fs-border: 1px solid rgba(15, 26, 31, 0.14); --fs-border-medium: 1px solid rgba(15, 26, 31, 0.26); --fs-border-dourado: 1px solid rgba(201, 169, 106, 0.40); --fs-border-focus: 2px solid var(--fds-ouro-sais); /* ── ALIAS DE SOMBRAS ──────────────────────────────────────────── */ --fs-shadow-none: none; --fs-shadow-subtle: var(--fds-shadow-soft); --fs-shadow-card: var(--fds-shadow-soft); --fs-shadow-elevated: var(--fds-shadow-lifted); /* ── ALIAS DE TRANSIÇÕES ───────────────────────────────────────── */ --fs-transition-fast: var(--fds-dur-fast) var(--fds-ease-standard); --fs-transition-base: var(--fds-dur-base) var(--fds-ease-standard); --fs-transition-slow: var(--fds-dur-slow) var(--fds-ease-emphasis); /* ── ALIAS DE Z-INDEX ──────────────────────────────────────────── */ --fs-z-dropdown: 100; --fs-z-sticky: 200; --fs-z-overlay: 300; } /* ── RESET EDITORIAL · SUPERSEDE INLINE FONT-FAMILY ──────────────── Garante que mesmo elementos com font-family inline herdem as fontes oficiais do brandbook (Marcellus para títulos, Jost corpo). Cormorant Garamond aparece em fallback no head antigo · neutralizado aqui. */ body, .admin body, .playbook body { font-family: var(--fds-font-body); } h1, h2, h3, h4, h5, h6, .section-headline, .hero__h1, .sg-h1, .sg-h2, .sg-h3 { font-family: var(--fds-font-heading); font-weight: var(--fds-fw-regular); letter-spacing: var(--fds-tracking-tight); } /* Cover lines · eyebrows poéticos viram Italiana */ .hero__sub em, .hero__h1 em, .section-headline em { font-family: var(--fds-font-display); font-style: italic; font-weight: 400; } /* ── ACESSIBILIDADE · DALTÔNICO-SAFE · WCAG AA ───────────────────── Endrigo é daltônico. Cor nunca é pista única. Garante outline visível em foco e link sublinhado quando isolado. */ a:not(.btn):not(.sg-nav__item):not(.site-header__nav a):not(.site-header__cta):not(.hero__badge) { text-decoration: underline; text-decoration-color: rgba(201, 169, 106, 0.4); text-decoration-thickness: 1px; text-underline-offset: 0.25em; } :focus-visible { outline: 2px solid var(--fds-ouro-sais); outline-offset: 3px; border-radius: 2px; }