/* ========================================================================== Rei do Celular — Design Tokens v1.0 · Abril 2026 -------------------------------------------------------------------------- Sistema único e canônico de tokens visuais da marca. Toda decisão de cor, tipografia, espaçamento, raio e elevação parte daqui. Nenhum CSS do tema deve declarar valor literal — sempre usar var(--token). ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap'); :root { /* -------------------------------------------------------------------------- CORES — paleta canônica Proporção rígida em qualquer tela: 70% creme · 25% preto · 5% âmbar -------------------------------------------------------------------------- */ /* Trio primário */ --rdc-color-preto: #0A0A0A; /* nunca usar #000 puro */ --rdc-color-creme: #FAF8F5; /* nunca usar #FFF puro */ --rdc-color-ambar: #B45309; /* acento técnico — uso restrito (~5%) */ /* Neutros de apoio */ --rdc-color-tinta: #1F1F1F; /* texto secundário em fundo creme */ --rdc-color-cinza: #6B6B6B; /* metadata, captions, helper text */ --rdc-color-cinza-claro: #D4D0CB; /* bordas, separadores, disabled */ --rdc-color-creme-escuro: #F0EBE3; /* superfície elevada sobre creme */ --rdc-color-branco: #FFFFFF; /* só p/ foto de produto + input fill */ /* Semânticas */ --rdc-color-sucesso: #15803D; --rdc-color-erro: #B91C1C; /* Hovers */ --rdc-color-ambar-hover: #92400E; --rdc-color-preto-hover: #1F1F1F; /* -------------------------------------------------------------------------- ALIASES SEMÂNTICAS — use estes nos componentes, não os tokens crus -------------------------------------------------------------------------- */ --rdc-bg: var(--rdc-color-creme); --rdc-bg-elevated: var(--rdc-color-creme-escuro); --rdc-bg-input: var(--rdc-color-branco); --rdc-bg-inverse: var(--rdc-color-preto); --rdc-fg: var(--rdc-color-preto); --rdc-fg-secondary: var(--rdc-color-tinta); --rdc-fg-muted: var(--rdc-color-cinza); --rdc-fg-disabled: var(--rdc-color-cinza-claro); --rdc-fg-inverse: var(--rdc-color-creme); --rdc-fg-accent: var(--rdc-color-ambar); --rdc-border: var(--rdc-color-cinza-claro); --rdc-border-strong: var(--rdc-color-preto); --rdc-border-accent: var(--rdc-color-ambar); --rdc-fg-success: var(--rdc-color-sucesso); --rdc-fg-error: var(--rdc-color-erro); /* -------------------------------------------------------------------------- TIPOGRAFIA — famílias -------------------------------------------------------------------------- */ --rdc-font-display: 'Cormorant Garamond', 'Times New Roman', Georgia, serif; --rdc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --rdc-font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace; /* -------------------------------------------------------------------------- TIPOGRAFIA — escala (desktop / mobile) -------------------------------------------------------------------------- */ /* Desktop */ --rdc-fs-display-1: 64px; --rdc-fs-display-2: 48px; --rdc-fs-h1: 36px; --rdc-fs-h2: 28px; --rdc-fs-h3: 22px; --rdc-fs-h4: 18px; --rdc-fs-body: 16px; --rdc-fs-body-sm: 14px; --rdc-fs-caption: 12px; --rdc-fs-eyebrow: 11px; /* Pesos */ --rdc-fw-regular: 400; --rdc-fw-medium: 500; --rdc-fw-semibold: 600; --rdc-fw-bold: 700; /* Line heights */ --rdc-lh-tight: 1.15; /* títulos grandes */ --rdc-lh-snug: 1.3; /* títulos médios */ --rdc-lh-normal: 1.5; /* UI */ --rdc-lh-relaxed: 1.6; /* corpo */ /* Letter spacing */ --rdc-ls-display: -0.01em; /* serifa apertada */ --rdc-ls-normal: 0; --rdc-ls-eyebrow: 0.08em; /* eyebrows e botões */ --rdc-ls-caps: 0.04em; /* labels caps menores */ /* -------------------------------------------------------------------------- ESPAÇAMENTO — escala 8pt (com 4pt como meio-passo) Toda margem, padding e gap = múltiplo destes -------------------------------------------------------------------------- */ --rdc-space-1: 4px; --rdc-space-2: 8px; --rdc-space-3: 12px; --rdc-space-4: 16px; --rdc-space-5: 20px; --rdc-space-6: 24px; --rdc-space-8: 32px; --rdc-space-10: 40px; --rdc-space-12: 48px; --rdc-space-16: 64px; --rdc-space-20: 80px; --rdc-space-24: 96px; --rdc-space-32: 128px; /* -------------------------------------------------------------------------- RAIOS — disciplinados, três níveis apenas -------------------------------------------------------------------------- */ --rdc-radius-sm: 2px; /* badges, etiquetas técnicas */ --rdc-radius-md: 4px; /* botões, inputs (padrão) */ --rdc-radius-lg: 8px; /* cards, modais */ --rdc-radius-pill: 9999px; /* uso raríssimo (filtros redondos) */ /* -------------------------------------------------------------------------- ELEVAÇÃO — sombras apenas quando necessário (modal/dropdown) Sombra pesada não existe no DS -------------------------------------------------------------------------- */ --rdc-shadow-none: none; --rdc-shadow-soft: 0 4px 24px rgba(10, 10, 10, 0.06); /* card elevado */ --rdc-shadow-modal: 0 20px 60px rgba(10, 10, 10, 0.15); /* modal/dropdown */ /* -------------------------------------------------------------------------- MOVIMENTO — easing e duração premium -------------------------------------------------------------------------- */ --rdc-ease: cubic-bezier(0.16, 1, 0.3, 1); --rdc-duration-fast: 150ms; --rdc-duration-normal: 200ms; --rdc-duration-slow: 300ms; /* -------------------------------------------------------------------------- CONTAINER — largura máxima de conteúdo 1440px alinha TODAS as páginas (home, sobre, política, produto, loja, categoria) na mesma largura. Antes páginas internas usavam 1200px e produto/loja 1440px, criando inconsistência visual no desktop. -------------------------------------------------------------------------- */ --rdc-container-max: 1440px; --rdc-container-narrow: 720px; --rdc-gutter: 24px; --rdc-gutter-mobile: 16px; } /* -------------------------------------------------------------------------- TIPOGRAFIA — escala mobile (≤640px) -------------------------------------------------------------------------- */ @media (max-width: 640px) { :root { --rdc-fs-display-1: 40px; --rdc-fs-display-2: 32px; --rdc-fs-h1: 28px; --rdc-fs-h2: 22px; --rdc-fs-h3: 18px; --rdc-fs-h4: 16px; --rdc-fs-body: 15px; --rdc-fs-body-sm: 13px; } } /* -------------------------------------------------------------------------- UTILS DE CLASSE — pequenos auxiliares para uso rápido Uso restrito a casos pontuais; preferir CSS modular nos arquivos próprios -------------------------------------------------------------------------- */ .rdc-eyebrow { font-family: var(--rdc-font-body); font-size: var(--rdc-fs-eyebrow); font-weight: var(--rdc-fw-semibold); text-transform: uppercase; letter-spacing: var(--rdc-ls-eyebrow); color: var(--rdc-fg-muted); } .rdc-display-1 { font-family: var(--rdc-font-display); font-size: var(--rdc-fs-display-1); font-weight: var(--rdc-fw-medium); line-height: var(--rdc-lh-tight); letter-spacing: var(--rdc-ls-display); } .rdc-display-2 { font-family: var(--rdc-font-display); font-size: var(--rdc-fs-display-2); font-weight: var(--rdc-fw-medium); line-height: var(--rdc-lh-tight); letter-spacing: var(--rdc-ls-display); } .rdc-h1 { font-family: var(--rdc-font-display); font-size: var(--rdc-fs-h1); font-weight: var(--rdc-fw-medium); line-height: var(--rdc-lh-tight); letter-spacing: var(--rdc-ls-display); } .rdc-h2 { font-family: var(--rdc-font-display); font-size: var(--rdc-fs-h2); font-weight: var(--rdc-fw-medium); line-height: var(--rdc-lh-snug); letter-spacing: var(--rdc-ls-display); } .rdc-h3 { font-family: var(--rdc-font-body); font-size: var(--rdc-fs-h3); font-weight: var(--rdc-fw-semibold); line-height: var(--rdc-lh-snug); } .rdc-h4 { font-family: var(--rdc-font-body); font-size: var(--rdc-fs-h4); font-weight: var(--rdc-fw-semibold); line-height: var(--rdc-lh-snug); } .rdc-body { font-family: var(--rdc-font-body); font-size: var(--rdc-fs-body); font-weight: var(--rdc-fw-regular); line-height: var(--rdc-lh-relaxed); } .rdc-body-sm { font-family: var(--rdc-font-body); font-size: var(--rdc-fs-body-sm); font-weight: var(--rdc-fw-regular); line-height: var(--rdc-lh-relaxed); } .rdc-caption { font-family: var(--rdc-font-body); font-size: var(--rdc-fs-caption); font-weight: var(--rdc-fw-medium); color: var(--rdc-fg-muted); }