/* ========================================================================== tokens.css — Design tokens da Plataforma Eliane Malaquias -------------------------------------------------------------------------- Todas as decis�es vis�veis do tema vivem aqui como CSS custom properties. Importe este arquivo ANTES de qualquer outra folha de estilo do tema. Posicionamento: autoridade intelectual + calor humano. Refer�ncia est�tica: heran�a editorial � pap�is, tintas, livros bem feitos. Conven��o de nomes: --em-color-* cores --em-font-* tipografia --em-space-* espa�amento --em-radius-* raios --em-shadow-* sombras --em-z-* z-index --em-bp-* breakpoints (refer�ncia, n�o usar em @media) --em-dur-* dura��es de transi��o --em-ease-* curvas de easing ========================================================================== */ :root { /* ------------------------------------------------------------------------ 1. CORES � PRIMITIVAS Paleta crua. Nunca consumir diretamente em componente; sempre via refer�ncia sem�ntica abaixo. ------------------------------------------------------------------------ */ /* Tinta � azul-tinta acinzentado, quente. Substitui o "preto puro". */ --em-ink-50: #F4F2F0; --em-ink-100: #E5E1DC; --em-ink-200: #C5BEB5; --em-ink-300: #948A7E; --em-ink-400: #5F574E; --em-ink-500: #3A342E; --em-ink-600: #2A2520; /* texto principal */ --em-ink-700: #1F1B17; --em-ink-800: #161310; --em-ink-900: #0E0C0A; /* Papel � off-whites quentes, base do tema. */ --em-paper-0: #FFFFFF; --em-paper-50: #FAF6EF; /* fundo principal */ --em-paper-100:#F4EEE3; --em-paper-200:#EBE2D2; --em-paper-300:#DCD0BA; /* Terracota � acento de a��o, herda do barro/livros encadernados. */ --em-clay-50: #FBEDE5; --em-clay-100: #F5D6C4; --em-clay-200: #E8AC8C; --em-clay-300: #D88361; --em-clay-400: #C26449; /* CTA principal */ --em-clay-500: #A24C33; --em-clay-600: #82381F; --em-clay-700: #5E2814; /* Vinho � acento secund�rio, tom literario, headings de destaque. */ --em-wine-100: #EAD8DD; --em-wine-300: #A85F6B; --em-wine-500: #6B2E3E; --em-wine-700: #461B28; /* Verde-musgo � feedback de sucesso, sem sair da paleta quente. */ --em-moss-100: #E1E6D7; --em-moss-300: #8B9871; --em-moss-500: #5A6747; --em-moss-700: #3B4530; /* Mostarda � aviso. */ --em-amber-100: #F6E6C2; --em-amber-400: #C99A2C; --em-amber-600: #8E6A14; /* Bord� escuro � erro/perigo, harmoniza com a paleta. */ --em-rouge-100: #F1D8D6; --em-rouge-400: #B84A41; --em-rouge-600: #862E27; /* Azul-leitura � info, dessaturado para n�o destoar. */ --em-azure-100: #DDE4EA; --em-azure-400: #5C7A92; --em-azure-600: #3A536A; /* ------------------------------------------------------------------------ 2. CORES � SEM�NTICAS Sempre consumir estas vari�veis nos componentes. Contraste WCAG AA verificado para todos os pares texto/fundo. ------------------------------------------------------------------------ */ /* Superf�cies */ --em-color-bg: var(--em-paper-50); /* fundo de p�gina */ --em-color-bg-raised: var(--em-paper-0); /* card, modal */ --em-color-bg-sunken: var(--em-paper-100); /* sec��es alternadas */ --em-color-bg-inverse: var(--em-ink-700); /* footer, hero invertido */ /* Texto */ --em-color-text: var(--em-ink-600); /* corpo */ --em-color-text-strong: var(--em-ink-800); /* headings */ --em-color-text-muted: var(--em-ink-400); /* secund�rio, captions */ --em-color-text-subtle: var(--em-ink-300); /* placeholder, disabled */ --em-color-text-on-dark: var(--em-paper-50); /* texto sobre bg-inverse */ --em-color-text-on-accent: var(--em-paper-0); /* texto sobre clay-400 */ /* Bordas */ --em-color-border: var(--em-ink-100); --em-color-border-strong: var(--em-ink-200); --em-color-border-focus: var(--em-clay-400); /* Marca */ --em-color-primary: var(--em-ink-700); --em-color-primary-hover: var(--em-ink-800); --em-color-accent: var(--em-clay-400); --em-color-accent-hover: var(--em-clay-500); --em-color-accent-soft: var(--em-clay-50); --em-color-secondary: var(--em-wine-500); --em-color-secondary-soft: var(--em-wine-100); /* Feedback */ --em-color-success: var(--em-moss-500); --em-color-success-soft: var(--em-moss-100); --em-color-warning: var(--em-amber-600); --em-color-warning-soft: var(--em-amber-100); --em-color-danger: var(--em-rouge-600); --em-color-danger-soft: var(--em-rouge-100); --em-color-info: var(--em-azure-600); --em-color-info-soft: var(--em-azure-100); /* ------------------------------------------------------------------------ 3. TIPOGRAFIA Newsreader � serifa literaria para headings. Manrope � sans humanista para corpo, UI e n�meros. System � fallback robusto. ------------------------------------------------------------------------ */ --em-font-serif: "Newsreader", "Source Serif Pro", Georgia, "Times New Roman", serif; --em-font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --em-font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace; /* Pesos */ --em-fw-regular: 400; --em-fw-medium: 500; --em-fw-semibold: 600; --em-fw-bold: 700; /* Escala tipogr�fica � clamp() responsivo, mobile-first. min: mobile (<640px), max: desktop (e1280px). */ --em-fs-display: clamp(2.75rem, 2rem + 3.75vw, 4.5rem); /* 44 � 72 */ --em-fs-h1: clamp(2.25rem, 1.7rem + 2.75vw, 3.5rem); /* 36 � 56 */ --em-fs-h2: clamp(1.75rem, 1.4rem + 1.75vw, 2.5rem); /* 28 � 40 */ --em-fs-h3: clamp(1.375rem, 1.2rem + 0.875vw, 1.75rem); /* 22 � 28 */ --em-fs-h4: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem); /* 18 � 20 */ --em-fs-h5: 1.0625rem; /* 17 */ --em-fs-h6: 0.9375rem; /* 15 */ --em-fs-body-lg: 1.125rem; /* 18 */ --em-fs-body: 1rem; /* 16 */ --em-fs-body-sm: 0.9375rem; /* 15 */ --em-fs-label: 0.8125rem; /* 13 */ --em-fs-caption: 0.75rem; /* 12 */ /* Altura de linha */ --em-lh-tight: 1.1; /* display, h1 */ --em-lh-snug: 1.25; /* h2-h4 */ --em-lh-normal: 1.55; /* corpo */ --em-lh-relaxed: 1.7; /* leitura longa */ /* Letter spacing */ --em-tracking-tight: -0.02em; /* display serif */ --em-tracking-normal: 0; --em-tracking-wide: 0.04em; /* labels caixa-alta */ --em-tracking-wider: 0.12em; /* eyebrows / kicker */ /* ------------------------------------------------------------------------ 4. ESPA�AMENTO Escala em m�ltiplos racionais. Usar em padding, margin e gap. ------------------------------------------------------------------------ */ --em-space-0: 0; --em-space-1: 0.25rem; /* 4 */ --em-space-2: 0.5rem; /* 8 */ --em-space-3: 0.75rem; /* 12 */ --em-space-4: 1rem; /* 16 */ --em-space-5: 1.25rem; /* 20 */ --em-space-6: 1.5rem; /* 24 */ --em-space-8: 2rem; /* 32 */ --em-space-10: 2.5rem; /* 40 */ --em-space-12: 3rem; /* 48 */ --em-space-16: 4rem; /* 64 */ --em-space-20: 5rem; /* 80 */ --em-space-24: 6rem; /* 96 */ --em-space-32: 8rem; /* 128 */ /* ------------------------------------------------------------------------ 5. RAIOS ------------------------------------------------------------------------ */ --em-radius-xs: 2px; --em-radius-sm: 4px; --em-radius-md: 8px; --em-radius-lg: 12px; --em-radius-xl: 20px; --em-radius-2xl: 28px; --em-radius-pill: 999px; /* ------------------------------------------------------------------------ 6. SOMBRAS Tons quentes (n�o cinza puro) para combinar com paper-50. ------------------------------------------------------------------------ */ --em-shadow-sm: 0 1px 2px rgba(42, 37, 32, 0.06), 0 1px 1px rgba(42, 37, 32, 0.04); --em-shadow-md: 0 4px 8px rgba(42, 37, 32, 0.06), 0 2px 4px rgba(42, 37, 32, 0.04); --em-shadow-lg: 0 12px 24px rgba(42, 37, 32, 0.08), 0 4px 8px rgba(42, 37, 32, 0.05); --em-shadow-xl: 0 24px 48px rgba(42, 37, 32, 0.12), 0 8px 16px rgba(42, 37, 32, 0.06); --em-shadow-focus: 0 0 0 3px rgba(194, 100, 73, 0.32); --em-shadow-inset: inset 0 1px 2px rgba(42, 37, 32, 0.08); /* ------------------------------------------------------------------------ 7. Z-INDEX ------------------------------------------------------------------------ */ --em-z-base: 1; --em-z-dropdown: 10; --em-z-sticky: 20; --em-z-overlay: 30; --em-z-modal: 40; --em-z-toast: 50; --em-z-tooltip: 60; /* ------------------------------------------------------------------------ 8. BREAKPOINTS � REFER�NCIA CSS custom properties N�O funcionam em @media. Use os valores abaixo diretamente nas media queries. Mant�m sincronizado com o JS. --em-bp-sm: 40rem; 640px tablet --em-bp-md: 48rem; 768px tablet wide --em-bp-lg: 64rem; 1024px desktop --em-bp-xl: 80rem; 1280px desktop wide --em-bp-2xl: 96rem; 1536px ultra ------------------------------------------------------------------------ */ --em-bp-sm: 40rem; --em-bp-md: 48rem; --em-bp-lg: 64rem; --em-bp-xl: 80rem; --em-bp-2xl: 96rem; /* ------------------------------------------------------------------------ 9. CONTAINER & GRID ------------------------------------------------------------------------ */ --em-container-max: 72rem; /* 1152px � leitura confort�vel */ --em-container-narrow: 44rem; /* 704px � texto longo */ --em-container-wide: 84rem; /* 1344px � hero, landings */ --em-container-pad-x: var(--em-space-6); /* ------------------------------------------------------------------------ 10. MOTION ------------------------------------------------------------------------ */ --em-dur-instant: 80ms; --em-dur-fast: 160ms; --em-dur-base: 240ms; --em-dur-slow: 400ms; --em-dur-slower: 640ms; --em-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --em-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --em-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --em-ease-linear: linear; /* ------------------------------------------------------------------------ 11. LAYERS UTILIT�RIAS ------------------------------------------------------------------------ */ --em-focus-ring: 0 0 0 3px var(--em-color-accent-soft), 0 0 0 5px var(--em-color-accent); } /* ========================================================================== Reduced motion � tokens reescalados para respeitar prefer�ncia do SO. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --em-dur-instant: 0ms; --em-dur-fast: 0ms; --em-dur-base: 0ms; --em-dur-slow: 0ms; --em-dur-slower: 0ms; } }