/** * Design Tokens — Camada 2 (Semântica) + Camada 3 (Componentes) * * Arquivo: assets/css/core/tokens.css * Versão: 3.2 * * ARQUITETURA: * * Camada 1 — --ds-* → gerada dinamicamente pelo PHP (tokens-generator.php) * Camada 2 — --color-*, etc. → este arquivo — semântica estática sobre --ds-* * Camada 3 — --btn-*, etc. → este arquivo — componentes derivados da Camada 2 * * REGRAS: * * ✅ Seções consomem Camada 2 (--color-*, --space-*, --radius-*, etc.) * ✅ Componentes consomem Camada 3 (--btn-*, --card-*, --input-*) * ❌ Nenhuma seção ou componente acessa --ds-* diretamente * ❌ Nenhum valor hardcoded de cor, fonte ou espaçamento aqui * * CARREGAMENTO: * * Este arquivo é estático e cacheável. * A Camada 1 (--ds-*) é emitida inline no pelo generator PHP. * Os tokens deste arquivo resolvem automaticamente quando --ds-* estiver disponível. * * @package FocofyFactory */ /* ============================================================ CAMADA 2 — SEMÂNTICA ============================================================ */ :root { /* ---------------------------------------------------------- Surfaces ---------------------------------------------------------- */ --color-bg: var(--ds-bg); --color-surface-1: var(--ds-surface-1); --color-surface-2: var(--ds-surface-2); --color-surface-3: var(--ds-surface-3); --color-surface-dark: var(--ds-surface-dark); --color-overlay: #000; /* preto absoluto — exclusivo para overlays de mídia (vídeo, lottie) */ /* ---------------------------------------------------------- Text v3.2: --color-heading independente de --color-text ---------------------------------------------------------- */ --color-heading: var(--ds-heading); /* H1–H4 — não usar --color-text para títulos */ --color-text: var(--ds-text); /* parágrafos e corpo */ --color-text-muted: var(--ds-text-muted); --color-text-inverse: var(--ds-text-inverse); /* texto sobre fundos escuros */ /* ---------------------------------------------------------- Links v3.2: formalizados como tokens independentes ---------------------------------------------------------- */ --color-link: var(--ds-link); --color-link-hover: var(--ds-link-hover); /* ---------------------------------------------------------- Borders ---------------------------------------------------------- */ --color-border-subtle: var(--ds-border-subtle); --color-border-strong: var(--ds-border-strong); /* ---------------------------------------------------------- Accents ---------------------------------------------------------- */ --color-accent: var(--ds-brand-primary); --color-accent-hover: var(--ds-brand-primary-hover); --color-accent-2: var(--ds-brand-secondary); /* ---------------------------------------------------------- States ---------------------------------------------------------- */ --color-success: var(--ds-success); --color-warning: var(--ds-warning); --color-danger: var(--ds-danger); --color-info: var(--ds-info); /* ---------------------------------------------------------- Gradients ---------------------------------------------------------- */ --gradient-hero: var(--ds-gradient-hero); --gradient-section-accent: var(--ds-gradient-section-accent); --gradient-dark: var(--ds-gradient-dark); /* ---------------------------------------------------------- Focus Ring ---------------------------------------------------------- */ --focus-ring-color: var(--ds-focus-color); --focus-ring-size: var(--ds-focus-size); --focus-ring-opacity: var(--ds-focus-opacity); /* ---------------------------------------------------------- Tipografia — Font Families ---------------------------------------------------------- */ --font-heading: var(--ds-font-heading); --font-body: var(--ds-font-body); --font-mono: var(--ds-font-mono); /* ---------------------------------------------------------- Tipografia — Font Weights fw-heading e fw-body vêm do ACF via generator fw-light → fw-extrabold são fixos (independentes do ACF) ---------------------------------------------------------- */ --fw-heading: var(--ds-fw-heading); --fw-body: var(--ds-fw-body); --fw-light: 300; --fw-normal: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; /* ---------------------------------------------------------- Tipografia — Font Sizes Calculadas dinamicamente pelo generator a partir de font_scale_base (default 16px) + font_scale_ratio (default 1.25) ---------------------------------------------------------- */ --font-size-base: var(--ds-font-size-base); --font-size-xs: var(--ds-font-size-xs); --font-size-sm: var(--ds-font-size-sm); --font-size-lg: var(--ds-font-size-lg); --font-size-xl: var(--ds-font-size-xl); --font-size-2xl: var(--ds-font-size-2xl); --font-size-3xl: var(--ds-font-size-3xl); --font-size-4xl: var(--ds-font-size-4xl); --font-size-5xl: var(--ds-font-size-5xl); /* ---------------------------------------------------------- Tipografia — Line Heights lh-tight e lh-body vêm do ACF via generator lh-snug e lh-relaxed são fixos ---------------------------------------------------------- */ --lh-tight: var(--ds-lh-heading); --lh-snug: 1.35; --lh-normal: var(--ds-lh-body); --lh-relaxed: 1.75; /* ---------------------------------------------------------- Espaçamento — Space Scale Calculada pelo generator: --space-N = space_unit × N space_unit default: 4px (padrão indústria — Tailwind/Radix/shadcn) ---------------------------------------------------------- */ --space-1: var(--ds-space-1); /* 4px */ --space-2: var(--ds-space-2); /* 8px */ --space-3: var(--ds-space-3); /* 12px */ --space-4: var(--ds-space-4); /* 16px */ --space-5: var(--ds-space-5); /* 20px */ --space-6: var(--ds-space-6); /* 24px */ --space-7: var(--ds-space-7); /* 28px */ --space-8: var(--ds-space-8); /* 32px */ --space-10: var(--ds-space-10); /* 40px */ --space-12: var(--ds-space-12); /* 48px */ --space-14: var(--ds-space-14); /* 56px */ --space-16: var(--ds-space-16); /* 64px */ --space-20: var(--ds-space-20); /* 80px */ --space-24: var(--ds-space-24); /* 96px */ /* Named aliases — semânticos */ --space-xs: var(--space-1); /* 4px */ --space-sm: var(--space-2); /* 8px */ --space-md: var(--space-4); /* 16px */ --space-lg: var(--space-6); /* 24px */ --space-xl: var(--space-8); /* 32px */ --space-2xl: var(--space-12); /* 48px */ /* ---------------------------------------------------------- Layout ---------------------------------------------------------- */ --container-max: var(--ds-container-max); /* ACF: container_max_width, default 1200px */ --container-narrow: 720px; /* fixo — não configurável */ --container-wide: 1400px; /* fixo — não configurável */ --content-max: 860px; /* fixo — largura de conteúdo editorial */ --section-padding-y: var(--ds-section-pad-y); /* ACF: section_padding_y, default 80px */ --section-padding-y-sm: 48px; /* fixo — mobile/compacto */ --grid-gap: var(--ds-grid-gap); /* ACF: grid_gap, default 24px */ --stack-gap: var(--space-4); /* gap padrão de stack vertical */ /* ---------------------------------------------------------- Fluid Container System (v1) — Factory-safe - Valores (tokens) ficam aqui - Regras de comportamento ficam no Responsive Contract ---------------------------------------------------------- */ --gutter: clamp(16px, 3vw, 40px); /* gutters fluidos (premium) */ --pad-x: var(--gutter); /* compat: usado em base/layout */ --section-py-fluid: clamp(32px, 6vw, var(--section-padding-y)); --section-py-fluid-sm: clamp(20px, 4vw, var(--section-padding-y-sm)); /* ---------------------------------------------------------- Border Radius Escala calculada pelo generator a partir de border_radius_base ---------------------------------------------------------- */ --radius-sm: var(--ds-radius-sm); /* base / 2 */ --radius-md: var(--ds-radius-md); /* = base */ --radius-lg: var(--ds-radius-lg); /* base + 4 */ --radius-xl: var(--ds-radius-xl); /* base + 8 */ --radius-2xl: var(--ds-radius-2xl); /* base + 12 */ --radius-full: var(--ds-radius-full); /* 9999px — sempre */ /* ---------------------------------------------------------- Shadows Escala definida por shadow_intensity no ACF (light/medium/strong) ---------------------------------------------------------- */ --shadow-sm: var(--ds-shadow-sm); --shadow-md: var(--ds-shadow-md); --shadow-lg: var(--ds-shadow-lg); --shadow-xl: var(--ds-shadow-xl); /* ---------------------------------------------------------- Transitions Calculadas pelo generator a partir de transition_speed (ACF) ---------------------------------------------------------- */ --transition-fast: var(--ds-transition-fast); /* ~150ms */ --transition-base: var(--ds-transition-base); /* ~250ms */ --transition-slow: var(--ds-transition-slow); /* ~400ms */ /* ---------------------------------------------------------- Breakpoints — Responsive Contract v1.0 (Design Tokens v3.3) Referência semântica oficial dos breakpoints. ⚠️ var() NÃO é resolvido dentro de @media queries pelo browser. Use os valores numéricos correspondentes nos CSS de seção, sempre acompanhados do comentário de referência ao token: @media (min-width: 768px) { ... } /* --bp-tablet */ @media (min-width: 1024px) { ... } /* --bp-desktop */ @media (min-width: 1440px) { ... } /* --bp-wide */ ---------------------------------------------------------- */ --bp-tablet: 768px; --bp-desktop: 1024px; --bp-wide: 1440px; } /* ============================================================ CAMADA 3 — COMPONENTES Derivados automaticamente da Camada 2. Componentes consomem estes tokens — nunca --ds-* diretamente. ============================================================ */ :root { /* ---------------------------------------------------------- Buttons — Base ---------------------------------------------------------- */ --btn-radius: calc(var(--radius-md) + 2px); --btn-padding-y: 12px; --btn-padding-x: 24px; --btn-font-weight: var(--fw-semibold); --btn-border-width: 1px; --btn-shadow: var(--shadow-md); --btn-transition: var(--transition-fast); /* ---------------------------------------------------------- Button Primary — deriva de color_primary ---------------------------------------------------------- */ --btn-primary-bg: var(--ds-brand-primary); --btn-primary-text: var(--color-text-inverse); --btn-primary-border: transparent; --btn-primary-hover-bg: var(--ds-brand-primary-hover); --btn-primary-hover-text: var(--color-text-inverse); --btn-primary-hover-border: transparent; /* ---------------------------------------------------------- Button Secondary — outline ---------------------------------------------------------- */ --btn-secondary-bg: transparent; --btn-secondary-text: var(--color-text); --btn-secondary-border: var(--color-border-strong); --btn-secondary-hover-bg: var(--color-surface-3); --btn-secondary-hover-text: var(--color-text); --btn-secondary-hover-border: var(--color-border-strong); /* ---------------------------------------------------------- Button Ghost — sem borda ---------------------------------------------------------- */ --btn-ghost-bg: transparent; --btn-ghost-text: var(--color-text); --btn-ghost-border: transparent; --btn-ghost-hover-bg: var(--color-surface-2); --btn-ghost-hover-text: var(--color-text); /* ---------------------------------------------------------- Button Accent — deriva de color_secondary Nota: hover usa primary-hover para harmonia de marca (bridging). Para hover independente, adicionar --ds-brand-secondary-hover no tokens-generator.php e substituir abaixo. ---------------------------------------------------------- */ --btn-accent-bg: var(--ds-brand-secondary); --btn-accent-text: var(--color-surface-dark); --btn-accent-border: transparent; --btn-accent-hover-bg: var(--ds-brand-primary-hover); --btn-accent-hover-text: var(--color-surface-dark); /* ---------------------------------------------------------- Cards ---------------------------------------------------------- */ --card-bg: var(--color-surface-2); --card-border: var(--color-border-subtle); --card-radius: calc(var(--radius-md) + 4px); --card-shadow: var(--shadow-sm); --card-shadow-hover: var(--shadow-lg); --card-padding: var(--space-8); --card-gap: var(--space-4); --card-transition: var(--transition-base); /* ---------------------------------------------------------- Inputs ---------------------------------------------------------- */ --input-bg: var(--color-surface-1); --input-text: var(--color-text); --input-placeholder: var(--color-text-muted); --input-border: var(--color-border-subtle); --input-border-focus: var(--color-accent); --input-border-error: var(--color-danger); --input-radius: var(--radius-md); --input-padding-y: var(--space-3); --input-padding-x: var(--space-4); --input-shadow-focus: 0 0 0 var(--focus-ring-size) color-mix(in srgb, var(--focus-ring-color) calc(var(--focus-ring-opacity) * 100%), transparent); --input-transition: var(--transition-fast); /* ---------------------------------------------------------- Badges / Tags ---------------------------------------------------------- */ --badge-radius: var(--radius-full); --badge-padding-y: var(--space-1); --badge-padding-x: var(--space-3); --badge-font-size: var(--font-size-xs); --badge-fw: var(--fw-medium); /* ---------------------------------------------------------- Dividers ---------------------------------------------------------- */ --divider-color: var(--color-border-subtle); --divider-color-strong: var(--color-border-strong); --divider-thickness: 1px; } /* ============================================================ APLICAÇÃO BASE Aplica os tokens de tipografia e cor no body/html. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { font-size: var(--font-size-base); -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-weight: var(--fw-body); font-size: var(--font-size-base); line-height: var(--lh-normal); color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--fw-heading); line-height: var(--lh-tight); color: var(--color-heading); /* token independente — não --color-text */ margin-top: 0; margin-bottom: var(--space-4); } h5, h6 { font-family: var(--font-heading); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--color-heading); margin-top: 0; margin-bottom: var(--space-3); } p { margin-top: 0; margin-bottom: var(--space-4); } a { color: var(--color-link); text-decoration: underline; text-decoration-color: transparent; transition: color var(--transition-fast), text-decoration-color var(--transition-fast); } a:hover { color: var(--color-link-hover); text-decoration-color: currentColor; } a:focus-visible { outline: var(--focus-ring-size) solid var(--focus-ring-color); outline-offset: 2px; border-radius: 2px; } /* ============================================================ ALIASES LEGADO NRB Mantidos para compatibilidade com seções anteriores à v3.1. Não usar em seções novas. ============================================================ */ :root { --focofy-success: var(--color-success); --focofy-error: var(--color-danger); }