/* ============================================================ * tokens.css · Costuragi Franquia · Wave 1 (Mission 1000-anos) * ------------------------------------------------------------ * Single source of truth pra design tokens da landing franquia. * Evolução incremental dos tokens inline existentes (index.html). * * Princípios: * - CSS-first · Baseline Widely Available * - Variable fonts (Cormorant Light + Montserrat + Sacramento) * - Modular scale 1.333 perfect-fourth (8 steps) * - oklch() pra cor moderna · hex fallback @supports * - 6 easings canônicos · 3 durações * - 8pt spacing grid + clamp() fluid scale * - @property declarations pra animations interpolation * * Integração: Wave 2+ vai @import este arquivo no . * Ordem de cascade: tokens.css → reset → base → components. * ========================================================== */ /* ── @property declarations · CSS Houdini · enables interpolation ── */ @property --scroll-progress { syntax: ''; inherits: true; initial-value: 0%; } @property --reveal-y { syntax: ''; inherits: false; initial-value: 0px; } @property --counter-value { syntax: ''; inherits: false; initial-value: 0; } @property --magnetic-x { syntax: ''; inherits: false; initial-value: 0px; } @property --magnetic-y { syntax: ''; inherits: false; initial-value: 0px; } /* ── ROOT TOKENS ── */ :root { /* ─── COLOR · base canônica (hex fallback) ─── */ --c-midnight: #1E2D4E; --c-midnight-canvas: #15233D; --c-midnight-surface: #1E2D4E; --c-midnight-frosted: rgba(30, 45, 78, 0.72); --c-midnight-light: #243758; --c-midnight-dark: #1A253F; --c-ivory: #F5EDD6; --c-ivory-warm: #F8F1DE; --c-ivory-deep: #EFE6CB; --c-cobre: #C4956A; /* alias semântico (cobre = brand) */ --c-copper: #C4956A; /* alias retro-compat */ --c-copper-50: #F5EAD9; --c-copper-100: #E8D2B0; --c-copper-600: #B08554; --c-copper-700: #94703F; /* ─── COLOR · semantic states (Wave 8.W1 · A3 Polaris-pattern) ─── */ /* Estados derivam do brand color por delta de lightness · sistemática Polaris */ /* default (canon) · hovered (-1.5pt) · pressed (-3pt) · focused (ring + alpha) */ --c-cobre-hovered: color-mix(in oklab, var(--c-cobre) 92%, black 8%); --c-cobre-pressed: color-mix(in oklab, var(--c-cobre) 85%, black 15%); --c-midnight-hovered: color-mix(in oklab, var(--c-midnight) 92%, white 8%); --c-midnight-pressed: color-mix(in oklab, var(--c-midnight) 85%, white 15%); --c-sage: #7B8F7A; --c-sage-text: #5F7360; --c-terracotta: #B5563A; --c-white: #FFFFFF; --c-gray-light: #F0EDE8; --c-gray-medium: #8C8478; --c-gray-darker: #6B6459; --c-graphite: #3D3530; --c-warm-black: #1A1410; --c-whatsapp: #25D366; --c-whatsapp-hover: #1ebe5a; /* RGB triples pra rgba() composition */ --c-midnight-rgb: 30, 45, 78; --c-ivory-rgb: 245, 237, 214; --c-copper-rgb: 196, 149, 106; --c-terracotta-rgb: 181, 86, 58; /* ─── COLOR · oklch upgrade (modern browsers) ─── */ /* Mantém hex como fallback · oklch ativa em @supports */ /* ─── TYPOGRAPHY · families ─── */ --font-display: 'Cormorant Garamond', 'Cormorant', Georgia, 'Times New Roman', serif; --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-script: 'Sacramento', 'Brush Script MT', cursive; --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, 'Cascadia Mono', Menlo, Consolas, monospace; /* aliases retro-compat */ --f-display: var(--font-display); --f-body: var(--font-sans); --f-accent: var(--font-script); /* ─── TYPOGRAPHY · modular scale 1.333 (perfect-fourth) ─── */ /* base = 1rem = 16px · ratio 1.333 · 8 steps */ --fs-0: 0.5625rem; /* 9.0px · micro */ --fs-1: 0.75rem; /* 12.0px · caption */ --fs-2: 1rem; /* 16.0px · body base */ --fs-3: 1.333rem; /* 21.3px · lead */ --fs-4: 1.777rem; /* 28.4px · h4 */ --fs-5: 2.369rem; /* 37.9px · h3 */ --fs-6: 3.157rem; /* 50.5px · h2 */ --fs-7: 4.209rem; /* 67.3px · h1 */ --fs-8: 5.61rem; /* 89.7px · display */ --fs-9: 7.478rem; /* 119.6px · hero-mega */ /* ─── TYPOGRAPHY · fluid clamp() scale ─── */ /* min em 320px · max em 1440px · interpola fluido */ --fs-fluid-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem); --fs-fluid-lead: clamp(1.125rem, 1rem + 0.625vw, 1.5rem); --fs-fluid-h4: clamp(1.5rem, 1.25rem + 1.25vw, 2rem); --fs-fluid-h3: clamp(2rem, 1.5rem + 2.5vw, 2.75rem); --fs-fluid-h2: clamp(2.5rem, 2rem + 2.5vw, 3.5rem); --fs-fluid-h1: clamp(3rem, 2.25rem + 3.75vw, 4.75rem); --fs-fluid-hero: clamp(3.75rem, 2.5rem + 6.25vw, 6rem); /* ─── TYPOGRAPHY · line-height ─── */ --lh-tight: 1.05; --lh-snug: 1.18; --lh-normal: 1.5; --lh-relaxed: 1.75; --lh-loose: 2; /* ─── TYPOGRAPHY · letter-spacing ─── */ --ls-tighter: -0.025em; --ls-tight: -0.015em; --ls-normal: 0; --ls-wide: 0.08em; --ls-wider: 0.18em; --ls-widest: 0.32em; /* ─── TYPOGRAPHY · weight ─── */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ─── SPACING · 8pt grid (em rem pra escalar com user font-size) ─── */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 2.5rem; /* 40px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ --space-11: 12rem; /* 192px */ /* aliases retro-compat */ --s-xs: var(--space-1); --s-sm: var(--space-2); --s-md: var(--space-4); --s-lg: var(--space-5); --s-xl: var(--space-7); --s-2xl: var(--space-8); --s-3xl: var(--space-9); --s-4xl: var(--space-10); /* fluid section padding */ --section-padding-fluid: clamp(3rem, 2rem + 5vw, 8rem); /* ─── FLUID SPACING SYSTEM (Wave 8.W5 · C2 Porsche-pattern) ─── */ /* Tokens com clamp() interno · permite usar gap/margin/padding sem repetir clamp em cada uso * Source: porsche-design-system/.../scss/_text.scss · pds-spacing-fluid-* family * Convention: --space-fluid-{xs|sm|md|lg|xl} · escala intermediária ao 8pt grid */ --space-fluid-xs: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem); /* 8 → 12px */ --space-fluid-sm: clamp(0.75rem, 0.6rem + 0.75vw, 1.125rem); /* 12 → 18px */ --space-fluid-md: clamp(1rem, 0.85rem + 0.75vw, 1.5rem); /* 16 → 24px */ --space-fluid-lg: clamp(1.5rem, 1.25rem + 1.25vw, 2.5rem); /* 24 → 40px */ --space-fluid-xl: clamp(2rem, 1.5rem + 2.5vw, 4rem); /* 32 → 64px */ --space-fluid-2xl: clamp(3rem, 2rem + 5vw, 6rem); /* 48 → 96px */ --space-fluid-3xl: clamp(4rem, 2.5rem + 7.5vw, 9rem); /* 64 → 144px */ /* ─── RADIUS ─── */ --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-xl: 24px; --r-pill: 999px; --r-circle: 50%; /* ─── EASING · 7 canonical (Wave 8.W1 · A2 Primer-pattern · semântica de uso) ─── */ /* Cada easing tem propósito documentado · alinhado com Primer org.primer.llm convention */ --ease-linear: linear; /* USO: progress-bar · loader · constant motion */ --ease-quart-out: cubic-bezier(0.165, 0.84, 0.44, 1); /* USO: reveal entry · element appearing on screen (default) */ --ease-quart-in: cubic-bezier(0.895, 0.03, 0.685, 0.22); /* USO: exit · element leaving viewport (rare standalone) */ --ease-quart-io: cubic-bezier(0.77, 0, 0.175, 1); /* USO: bidirectional motion · drawer · modal */ --ease-soft: cubic-bezier(0.16, 1, 0.3, 1); /* USO: hover state changes · micro-interactions · button hover */ --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55); /* USO: easter eggs · attention-grabbing · use sparingly */ --ease-spring: linear(0, 0.402, 0.79, 1.107, 1.246, 1.21, 1.085, 1, 0.972, 1); /* USO: physics-based · natural feel */ /* aliases retro-compat */ --ease-out: var(--ease-soft); --ease-in-out: var(--ease-quart-io); /* ─── DURATION · 5 canonical ─── */ --duration-instant: 80ms; --duration-fast: 180ms; --duration-base: 300ms; --duration-slow: 600ms; --duration-cinema: 2400ms; /* M13 counter · stitch-line */ /* aliases retro-compat */ --dur-fast: var(--duration-fast); --dur-base: var(--duration-base); --dur-slow: var(--duration-slow); /* ─── SHADOW · elevation system ─── */ --shadow-1: 0 1px 2px rgba(var(--c-midnight-rgb), 0.10); --shadow-2: 0 4px 14px rgba(var(--c-midnight-rgb), 0.14); --shadow-3: 0 12px 32px rgba(var(--c-midnight-rgb), 0.18); --shadow-4: 0 24px 56px rgba(var(--c-midnight-rgb), 0.22); --shadow-card: 0 4px 20px rgba(var(--c-midnight-rgb), 0.08); --shadow-card-hover: 0 12px 36px rgba(var(--c-midnight-rgb), 0.14); --shadow-hero: 0 32px 80px rgba(0, 0, 0, 0.4); --shadow-hero-mobile: 0 16px 40px rgba(0, 0, 0, 0.3); --shadow-cta: 0 8px 28px rgba(var(--c-copper-rgb), 0.35); --shadow-cta-hover: 0 12px 36px rgba(var(--c-copper-rgb), 0.5); --shadow-inset: inset 0 2px 4px rgba(var(--c-midnight-rgb), 0.06); /* ─── FOCUS RING (Wave 8.W1 · A6 Primer-pattern · WCAG 2.4.7 mandatory) ─── */ /* WCAG 2.4.7 (Focus Visible · AA): keyboard focus deve ser visualmente identificável. * WCAG 2.4.11 (Focus Appearance · AAA): contrast ≥3:1 com adjacent · area mínima 1px perimeter * Implementação: solid ring 3px + outline-offset 2px + box-shadow alpha layer (B2 shadcn-pattern) */ --ring: 3px solid var(--c-cobre); --ring-offset: 2px; --ring-color: var(--c-cobre); --ring-shadow-alpha: 0 0 0 6px rgba(196, 149, 106, 0.25); /* alpha 25% · duplo-ring effect */ /* ─── Z-INDEX scale ─── */ --z-below: -1; --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-progress: 999; --z-overlay: 1000; --z-skip-link: 9999; } /* ── oklch upgrade · modern browsers ── */ @supports (color: oklch(0% 0 0)) { :root { /* tonalidades paramétricas · base canônica preservada visualmente */ --c-midnight-oklch: oklch(28% 0.04 256); --c-ivory-oklch: oklch(94% 0.03 90); --c-cobre-oklch: oklch(70% 0.07 65); --c-sage-oklch: oklch(58% 0.04 138); --c-terracotta-oklch: oklch(54% 0.13 35); } } /* ── @container query units · Baseline 2023 ── */ /* Componentes podem usar cqi/cqb/cqw/cqh · nada precisa registrar aqui · só lembrete */ /* ── REDUCED MOTION · system-wide ── */ @media (prefers-reduced-motion: reduce) { :root { --duration-instant: 1ms; --duration-fast: 1ms; --duration-base: 1ms; --duration-slow: 1ms; --duration-cinema: 1ms; } } /* ── DARK MODE · futureproof scaffold (não-ativo Wave 1) ── */ /* Wave 12 · se decisão for ativar dark mode editorial */ @media (prefers-color-scheme: dark) { /* tokens redefinidos virão aqui se Rafael aprovar dark mode */ } /* ───────────────────────────────────────────────────────────────────── * Wave 8.W1 · Token Architecture Refactor (Fase VIII) * Patterns aplicados dos 39 DS do Alan Nicolas: * - A1 · 3-tier tokens (Primer Primitives) · base→functional→component * - A4 · Lightness scale (Polaris Tokens) · color-mix() systematic states * - A5 · Prose typescale (Porsche Design System) · semantic heading classes * ───────────────────────────────────────────────────────────────────── */ :root { /* ─── FUNCTIONAL TIER · semantic tokens (A1 Primer-pattern) ─── */ /* base color tokens acima viram primitives · functional tokens abaixo viram semantic */ --color-text-primary: var(--c-graphite); /* body text · ratio 10.26:1 ivory bg AAA */ --color-text-secondary: var(--c-gray-darker); /* caption · ratio 5:1 ivory bg AA */ --color-text-on-dark: var(--c-ivory); /* text em fundo midnight · ratio 11.66:1 AAA */ --color-text-accent: var(--c-cobre); /* accent decorativo · brand */ --color-bg-canvas: var(--c-ivory); /* canvas main · landing default */ --color-bg-surface: var(--c-white); /* card · modal · elevated surface */ --color-bg-dark: var(--c-midnight); /* hero · oferta · virada · diferencial */ --color-bg-frosted: var(--c-midnight-frosted); /* nav scrolled · sticky bars */ --color-border-subtle: rgba(var(--c-copper-rgb), 0.18); --color-border-strong: rgba(var(--c-copper-rgb), 0.4); /* ─── PROSE HEADING TYPESCALE (A5 Porsche-pattern) ─── */ /* Encapsulação de heading semântica · 5 níveis editorial * Uso:

ou

· decoupling visual×semantic (B3 gestalt) * Cada nível encapsula font + weight + leading + letter-spacing como bloco coeso */ --prose-display-size: var(--fs-fluid-hero); /* clamp 3.75rem → 6rem · §Hero hero-mega */ --prose-display-weight: 300; /* Cormorant Light variable */ --prose-display-leading: 1.05; --prose-display-tracking: -0.025em; --prose-display-max-width: 16ch; --prose-h1-size: var(--fs-fluid-h1); /* clamp 3rem → 4.75rem */ --prose-h1-weight: 300; --prose-h1-leading: 1.1; --prose-h1-tracking: -0.02em; --prose-h1-max-width: 20ch; --prose-h2-size: var(--fs-fluid-h2); /* clamp 2.5rem → 3.5rem */ --prose-h2-weight: 400; --prose-h2-leading: 1.15; --prose-h2-tracking: -0.015em; --prose-h2-max-width: 24ch; --prose-h3-size: var(--fs-fluid-h3); /* clamp 2rem → 2.75rem */ --prose-h3-weight: 500; --prose-h3-leading: 1.2; --prose-h3-tracking: -0.01em; --prose-h3-max-width: 28ch; --prose-body-size: var(--fs-fluid-body); --prose-body-weight: 400; --prose-body-leading: 1.7; --prose-body-tracking: 0; --prose-body-max-width: 60ch; }