/* ============================================================================= WLC Design System — fundação de tokens + componentes ----------------------------------------------------------------------------- Uso: carregado após o Bootstrap. Namespacing `--ds-*` / `.ds-*` para não colidir com estilos existentes (adoção incremental, sem migração forçada). Marca: `--ds-brand` herda de `--cor-primaria` (white-label por barbearia). Tema escuro: aplicar `.ds-theme-dark` num ancestral (ex.: ) para o painel master; os tokens semânticos são remapeados. ========================================================================== */ /* O seletor de atributo repete os valores claros para que um data-bs-theme="light" ANINHADO (ex.: o preview do card público dentro do painel escuro) volte à paleta clara — `:root` sozinho não alcança um filho. */ :root, [data-bs-theme="light"] { /* ── Marca (white-label) ─────────────────────────────────────────────── */ --ds-brand: var(--cor-primaria, #0d6efd); --ds-brand-contrast: #ffffff; /* ── Paleta neutra (primitivos) ──────────────────────────────────────── */ --ds-neutral-0: #ffffff; --ds-neutral-50: #f8fafc; --ds-neutral-100: #f1f4f9; --ds-neutral-200: #e5e9f0; --ds-neutral-300: #d3d9e3; --ds-neutral-400: #aab2c0; --ds-neutral-500: #8492a6; --ds-neutral-600: #626d80; --ds-neutral-700: #454e5e; --ds-neutral-800: #2a2e3a; --ds-neutral-900: #161a24; /* ── Status (primitivos) — alinhados à paleta já usada no produto ────── */ --ds-success: #10b981; --ds-success-soft: #e7f7ef; --ds-danger: #ef4444; --ds-danger-soft: #fdeaea; --ds-warning: #f59e0b; --ds-warning-soft: #fdf3e2; --ds-info: #3b82f6; --ds-info-soft: #e8f0fe; /* Versão para TEXTO. Os primitivos acima nasceram para preencher (barra, bolinha, borda), onde 3:1 basta. Como texto sobre o fundo do tema eles reprovam em AA — #3b82f6 dá 3.68:1 sobre branco. Estes são os que contrastam ≥4.5:1 em cada tema; no escuro clareiam. */ --ds-success-text: #047857; --ds-danger-text: #b91c1c; --ds-warning-text: #b45309; --ds-info-text: #1d4ed8; /* ── Tokens semânticos (tema claro — padrão) ─────────────────────────── */ --ds-bg: var(--ds-neutral-100); --ds-surface: var(--ds-neutral-0); --ds-surface-2: var(--ds-neutral-50); --ds-text: var(--ds-neutral-900); --ds-text-muted: var(--ds-neutral-600); --ds-text-subtle: #616d83; /* entre neutral-500 e 600: contraste AA (≥4.5:1) sobre branco e neutral-100 */ --ds-border: var(--ds-neutral-200); --ds-border-strong:var(--ds-neutral-300); /* ── Espaçamento (base 4px) ──────────────────────────────────────────── */ --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 24px; --ds-space-6: 32px; --ds-space-7: 48px; --ds-space-8: 64px; /* ── Raio ────────────────────────────────────────────────────────────── */ --ds-radius-sm: 6px; --ds-radius-md: 10px; --ds-radius-lg: 14px; --ds-radius-xl: 20px; --ds-radius-pill: 999px; /* ── Sombra ──────────────────────────────────────────────────────────── */ --ds-shadow-sm: 0 2px 12px rgba(16, 24, 40, .06); --ds-shadow-md: 0 6px 20px rgba(16, 24, 40, .09); --ds-shadow-lg: 0 14px 40px rgba(16, 24, 40, .14); /* ── Tipografia ──────────────────────────────────────────────────────── */ --ds-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Escala em passos redondos (12/14/16/18/20…). A anterior partia de 15.2px no corpo — abaixo do padrão de 16px do navegador, que é o tamanho que quem enxerga menos espera — e tinha razão de 1.14 entre os degraus pequenos, perto demais para o olho distinguir hierarquia. */ --ds-text-xs: .75rem; /* 12px — rótulo, badge, legenda curta */ --ds-text-sm: .875rem; /* 14px — apoio, metadado */ --ds-text-base: 1rem; /* 16px — corpo: mínimo para texto que se lê */ --ds-text-lg: 1.125rem; /* 18px — corpo destacado, lead */ --ds-text-xl: 1.25rem; /* 20px — subtítulo */ /* Títulos fluidos: encolhem no celular e travam no desktop (mobile-first) */ --ds-text-2xl: clamp(1.5rem, 1.15rem + 1.6vw, 1.875rem); /* 24 → 30 */ --ds-text-3xl: clamp(1.875rem, 1.3rem + 2.6vw, 2.5rem); /* 30 → 40 */ --ds-text-4xl: clamp(2.25rem, 1.3rem + 4.4vw, 3.5rem); /* 36 → 56 (display) */ --ds-weight-regular: 400; --ds-weight-medium: 500; --ds-weight-semibold: 600; --ds-weight-bold: 700; --ds-weight-black: 800; --ds-leading-tight: 1.15; /* títulos */ --ds-leading-snug: 1.35; /* subtítulo, texto curto */ --ds-leading-normal: 1.5; /* interface */ --ds-leading-relaxed: 1.65; /* parágrafo longo */ /* Medida de linha: acima de ~75 caracteres o olho erra a volta de linha. */ --ds-measure: 68ch; --ds-measure-tight: 52ch; /* ── Movimento ───────────────────────────────────────────────────────── */ --ds-transition: .18s ease; /* Fundo da aplicação. Fica aqui (e não no