/* ============================================================================ tokens.css — ProductID Design System ---------------------------------------------------------------------------- Fase 1 do redesign. Define todas as variáveis CSS (cores, tipografia, espaçamento, radius, sombras, transições) consumidas pelo restante do sistema. Princípios: - CSS plain, sem build pipeline. Carregar via antes de base.css. - Toda cor, espaçamento, radius e sombra DEVE vir de variável daqui. Componentes não hardcodam valores. - Escala de cinzas derivada por opacidade sobre o charcoal, não por hex distintos (coerência tonal — vocabulário Lovable). - Estruturado para futura troca via [data-theme="dark"]: redefinir as variáveis "semânticas" abaixo do bloco (seção SEMANTIC) basta — nenhum componente referencia o hex bruto diretamente. - Cores de acento em tons dusty / warm-neutral. Sem saturações vibrantes. ============================================================================ */ :root { /* ────────────────────────────────────────────────────────────────────────── RAW PALETTE — valores brutos. Componentes NÃO devem referenciar estes diretamente; sempre passar pelas variáveis semânticas abaixo. ────────────────────────────────────────────────────────────────────────── */ /* Base */ --color-cream: #f7f4ed; /* fundo página / superfície de card */ --color-cream-soft: #fcfbf8; /* texto sobre dark; highlight quase-branco */ --color-cream-deep: #f2eee4; /* hover sutil sobre cream */ --color-charcoal: #1c1c1c; /* texto primário / superfície dark */ --color-border-warm: #eceae4; /* divisor warm passivo */ /* Charcoal em opacidade — gera toda a escala de cinzas */ --color-charcoal-a83: rgba(28, 28, 28, 0.83); --color-charcoal-a82: rgba(28, 28, 28, 0.82); --color-charcoal-a55: rgba(28, 28, 28, 0.55); /* borda interativa — 3.74:1 sobre cream (WCAG 1.4.11 ≥ 3:1) */ --color-charcoal-a40: rgba(28, 28, 28, 0.40); /* texto desabilitado / divisor secundário */ --color-charcoal-a08: rgba(28, 28, 28, 0.08); --color-charcoal-a04: rgba(28, 28, 28, 0.04); /* hover muito sutil */ --color-charcoal-a03: rgba(28, 28, 28, 0.03); --color-muted-gray: #5f5f5d; /* secundário / caption */ /* Estados — paleta dusty, inspirada em etiquetas de papel cream. Cada estado tem canônico (borda/ícone), bg-soft (fundo de pílula), fg (texto sobre bg-soft). Contraste validado WCAG AA. */ /* Success — sage / oliva */ --color-success: #5e7a3a; --color-success-bg-soft: #eaeed6; --color-success-fg: #3d5424; /* Warning — mostarda */ --color-warning: #a3801f; --color-warning-bg-soft: #f3ead0; --color-warning-fg: #6e560d; /* Danger — terracota */ --color-danger: #a45a3c; --color-danger-bg-soft: #f1ddd3; --color-danger-fg: #6e3a22; /* Info — azul-acinzentado / slate */ --color-info: #4a6b85; --color-info-bg-soft: #dde6ee; --color-info-fg: #2e4a63; /* Focus ring — soft, warm. Mantemos o blue ring apenas em inputs porque é o sinal de acessibilidade que usuários reconhecem. */ --color-focus-ring: rgba(59, 130, 246, 0.5); /* ────────────────────────────────────────────────────────────────────────── SEMANTIC TOKENS — usados pelos componentes. Trocar [data-theme="dark"] no futuro só exige redefinir este bloco. ────────────────────────────────────────────────────────────────────────── */ /* Superfícies */ --surface-page: var(--color-cream); --surface-card: var(--color-cream); --surface-raised: var(--color-cream-soft); --surface-sunken: var(--color-cream-deep); --surface-dark: var(--color-charcoal); --surface-overlay: var(--color-charcoal-a04); /* Texto */ --text-primary: var(--color-charcoal); --text-strong: var(--color-charcoal-a83); --text-body: var(--color-charcoal-a82); --text-muted: var(--color-muted-gray); --text-on-dark: var(--color-cream-soft); --text-link: var(--color-charcoal); --text-disabled: var(--color-charcoal-a40); /* Bordas */ --border-subtle: var(--color-border-warm); --border-interactive: var(--color-charcoal-a55); --border-strong: var(--color-charcoal); /* ────────────────────────────────────────────────────────────────────────── TYPOGRAPHY Fonte primária: DM Sans (já em produção, substitui Camera Plain Variable). Pesos disponíveis: 400 / 500 / 600 / 700. Onde a referência pedia 480, usamos 500 (próximo equivalente sem variable axis). ────────────────────────────────────────────────────────────────────────── */ --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Pesos */ --fw-regular: 400; --fw-medium: 500; /* substitui 480 da referência */ --fw-semibold: 600; --fw-bold: 700; /* Escala tipográfica (rem-based, root = 16px) */ --fs-display: 3.75rem; /* 60px — hero */ --fs-h1: 3.00rem; /* 48px — section heading */ --fs-h2: 2.25rem; /* 36px — sub-heading */ --fs-h3: 1.75rem; /* 28px — page title em listagens */ --fs-h4: 1.375rem; /* 22px — card title forte */ --fs-h5: 1.25rem; /* 20px — card title padrão */ --fs-h6: 1.0625rem;/* 17px — section label */ --fs-body-lg: 1.125rem; /* 18px */ --fs-body: 1rem; /* 16px — padrão */ --fs-body-sm: 0.9375rem;/* 15px — densidade alta */ --fs-caption: 0.875rem; /* 14px — metadado, footer link */ --fs-micro: 0.75rem; /* 12px — uppercase eyebrow */ /* Line-heights — tighten em display, generoso em body */ --lh-display: 1.00; --lh-heading: 1.10; --lh-snug: 1.25; --lh-body: 1.50; --lh-loose: 1.65; /* Letter-spacing — negativo a partir de 36px */ --ls-display: -0.025em; /* ≈ -1.5px @ 60px (referência: -1.5px) */ --ls-h1: -0.025em; /* ≈ -1.2px @ 48px */ --ls-h2: -0.025em; /* ≈ -0.9px @ 36px */ --ls-h3: -0.015em; --ls-normal: 0; --ls-wide: 0.04em; --ls-eyebrow: 0.08em; /* uppercase micro labels */ /* ────────────────────────────────────────────────────────────────────────── SPACING — base 4px, alinhada à escala generosa Lovable em section gaps. ────────────────────────────────────────────────────────────────────────── */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.625rem; /* 10px */ --space-4: 0.75rem; /* 12px */ --space-5: 1rem; /* 16px */ --space-6: 1.5rem; /* 24px */ --space-7: 2rem; /* 32px */ --space-8: 2.5rem; /* 40px */ --space-9: 3.5rem; /* 56px */ --space-10: 5rem; /* 80px */ --space-11: 6rem; /* 96px */ --space-12: 8rem; /* 128px */ --space-13: 11rem; /* 176px */ --space-14: 12rem; /* 192px */ --space-15: 13rem; /* 208px */ /* ────────────────────────────────────────────────────────────────────────── BORDER RADIUS ────────────────────────────────────────────────────────────────────────── */ --radius-xs: 4px; /* micro: chips internos, tags */ --radius-sm: 6px; /* padrão: botões, inputs, nav menu */ --radius-md: 8px; /* cards compactos */ --radius-lg: 12px; /* cards padrão, image containers */ --radius-xl: 16px; /* containers grandes, painéis featured */ --radius-pill: 9999px; /* pílulas: status, role, icon button */ /* ────────────────────────────────────────────────────────────────────────── SHADOWS — sistema deliberadamente raso. Bordas warm carregam contenção; a única sombra "tátil" é a inset multi-layer dos botões dark. ────────────────────────────────────────────────────────────────────────── */ /* Nenhuma sombra — cards usam border warm */ --shadow-none: none; /* Inset característico — botão dark primário. White highlight no topo + dark ring + soft drop. */ --shadow-inset-dark: rgba(255, 255, 255, 0.20) 0px 0.5px 0px 0px inset, rgba(0, 0, 0, 0.20) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px; /* Variante leve para superfícies cream com mesmo vocabulário tátil */ --shadow-inset-light: rgba(255, 255, 255, 0.60) 0px 0.5px 0px 0px inset, rgba(28, 28, 28, 0.08) 0px 0px 0px 0.5px inset, rgba(28, 28, 28, 0.04) 0px 1px 2px 0px; /* Focus / active — soft, warm, diffused */ --shadow-focus: rgba(0, 0, 0, 0.10) 0px 4px 12px; /* Ring de acessibilidade (apenas inputs com teclado) */ --shadow-ring-focus: 0 0 0 3px var(--color-focus-ring); /* Sombra ambiente para painéis flutuantes (raro — dropdowns, popovers) */ --shadow-floating: 0 1px 2px rgba(28, 28, 28, 0.04), 0 8px 24px rgba(28, 28, 28, 0.08); /* ────────────────────────────────────────────────────────────────────────── TRANSITIONS — curtas e funcionais; sem easing exótico. ────────────────────────────────────────────────────────────────────────── */ --transition-fast: 120ms cubic-bezier(0.2, 0, 0.2, 1); --transition-base: 180ms cubic-bezier(0.2, 0, 0.2, 1); --transition-slow: 260ms cubic-bezier(0.2, 0, 0.2, 1); --opacity-pressed: 0.8; /* :active feedback */ --opacity-disabled: 0.5; /* ────────────────────────────────────────────────────────────────────────── LAYOUT ────────────────────────────────────────────────────────────────────────── */ --container-max: 1200px; --container-narrow: 720px; --container-public: 560px; /* página pública QR */ --sidebar-width: 240px; --topbar-height: 64px; } /* ============================================================================ DARK THEME PLACEHOLDER ---------------------------------------------------------------------------- Estrutura preparada — não implementada nesta fase. Quando ativarmos dark, bastará redefinir o bloco SEMANTIC abaixo (e talvez sombras / focus). Componentes não devem precisar mudar. ============================================================================ */ /* [data-theme="dark"] { --surface-page: #1c1c1c; --surface-card: #232323; --surface-raised: #2a2a2a; --surface-sunken: #181818; --surface-dark: #0e0e0e; --text-primary: #f2efe6; --text-strong: rgba(247, 244, 237, 0.92); --text-body: rgba(247, 244, 237, 0.82); --text-muted: #a3a09a; --text-on-dark: #f7f4ed; --border-subtle: rgba(247, 244, 237, 0.10); --border-interactive: rgba(247, 244, 237, 0.32); --border-strong: #f7f4ed; } */