/* ============================================================================= capitaldoamor.com.br tokens.css : sistema de design, custom properties Versão 1.0 Origem: evolução direta do tema iCasei 199 (_arquivo-icasei/api/template.json). Preservados sem alteração de valor: #A75D3E (terracota), #FAF8F5 (off-white), #B3A17D (dourado seco), #FFFFFF (cartão), raio de 4px. REGRA DE MANUTENÇÃO 1. Toda cor nasce na camada PRIMITIVAS, dentro de :root. Nenhuma cor existe apenas no bloco de tema escuro. Os blocos escuros só reapontam tokens semânticos para primitivas já declaradas aqui. 2. Componente nunca usa primitiva. Componente usa token semântico. 3. Contraste WCAG anotado ao lado de cada par de texto sobre fundo. AA exige 4.5:1 (texto normal) e 3:1 (texto grande e contorno de controle). ============================================================================= */ /* ============================================================================= 1. PRIMITIVAS ============================================================================= */ :root { color-scheme: light dark; /* --------------------------------------------------------------------------- 1.1 Terracota. Cor de marca. Base 500 herdada do tema antigo. --------------------------------------------------------------------------- */ --t-50: #FBF2ED; /* lavado, fundo de estado hover em botão secundário */ --t-100: #F4DFD5; /* chip inativo, tabela zebrada */ --t-200: #E9B79F; /* texto e anel de foco no tema escuro (10.39:1) */ --t-300: #D98C6A; /* texto de destaque no tema escuro (7.00:1) */ --t-400: #BE7554; /* filete e ícone em superfície escura */ --t-500: #A75D3E; /* BASE, herdada. Preenchimento e título display */ --t-600: #985233; /* preenchimento de botão primário (off-white 5.52:1) */ --t-700: #7E4229; /* link inline e hover de botão (7.34:1 no off-white) */ --t-800: #5E3120; /* pressed */ --t-900: #3A1F14; /* extremo, só filete sobre terracota */ /* --------------------------------------------------------------------------- 1.2 Dourado seco. Herdado (400). Vive como FILETE, não como preenchimento. É a regra que impede o site de virar casamento dourado brilhante. --------------------------------------------------------------------------- */ --g-100: #F1EBDE; --g-200: #E1D7BF; --g-300: #C9BB9A; /* texto sobre superfícies escuras (9.79:1) */ --g-400: #B3A17D; /* BASE, herdada. Filete decorativo. Nunca texto claro */ --g-500: #9A8863; /* filete em tema escuro */ --g-600: #7E6E4D; --g-700: #6B5C3E; /* o único dourado que carrega texto no claro (6.14:1) */ /* --------------------------------------------------------------------------- 1.3 Jamari. Único acento novo. Verde-água dessaturado. Matiz lida da placa verde da BR-364 como ela aparece na foto noturna, puxada para a cor do rio Jamari. Só interação e orientação. --------------------------------------------------------------------------- */ --j-100: #DEE9E7; --j-300: #8FBFB6; /* selecionado no tema escuro (9.11:1) */ --j-500: #2E6A62; /* selecionado no tema claro (5.91:1) */ --j-600: #24544E; /* preenchimento de chip ativo (off-white 8.08:1) */ --j-700: #1B403B; /* --------------------------------------------------------------------------- 1.4 Areia. Neutro quente do tema claro. Papel e tinta. --------------------------------------------------------------------------- */ --sand-0: #FFFFFF; /* cartão, herdado de lightBackground */ --sand-50: #FAF8F5; /* BASE, herdada. Fundo de página */ --sand-100: #F2EDE6; /* faixa de respiro */ --sand-150: #EDE6DC; /* bloco embutido, citação recuada */ --sand-200: #E6DFD6; /* filete de cabelo */ --sand-300: #D9CFC2; /* borda padrão */ --sand-400: #8C7F72; /* borda de controle de formulário (3.67:1) */ --sand-500: #6E655E; /* texto terciário (5.37:1) */ --sand-700: #45403A; /* texto corrido (9.68:1) */ --sand-900: #26211E; /* texto forte (15.02:1) */ /* --------------------------------------------------------------------------- 1.5 Noite. Neutro quente escuro. Serve às faixas escuras do tema CLARO (galeria, contador, a seção da placa) e a tudo no tema escuro. --------------------------------------------------------------------------- */ --night-50: #F5EFE8; /* texto forte sobre escuro (16.28:1) */ --night-100: #E8DFD3; /* legenda sobre foto (14.78:1 no #0F0C0A) */ --night-150: #DCD3C9; /* texto corrido sobre escuro (12.57:1) */ --night-300: #A99C90; /* texto terciário sobre escuro (6.94:1) */ --night-500: #7A685A; /* borda de controle no escuro (3.50:1) */ --night-600: #3A2F29; /* borda padrão no escuro */ --night-700: #2E241F; /* faixa de contraste dentro do tema escuro */ --night-750: #2B211C; /* faixa de contraste dentro do tema claro */ --night-800: #241C18; /* bloco embutido no escuro */ --night-850: #1F1815; /* cartão no escuro */ --night-900: #17120F; /* fundo de página no escuro */ --night-950: #100C0A; /* faixa rebaixada no escuro */ --night-1000: #0F0C0A; /* fundo do lightbox, os dois temas */ /* --------------------------------------------------------------------------- 1.6 Funcionais. Só formulário, aviso de remoção de foto e erro de upload. Substituem o #ef5350 do tema antigo, que era vermelho de framework. --------------------------------------------------------------------------- */ --fn-danger-500: #A33A32; /* 6.17:1 no off-white */ --fn-danger-300: #E28C7F; /* 7.34:1 no #17120F */ --fn-danger-50: #F9E9E6; --fn-success-500: #4E6B4F; /* 5.60:1 no off-white */ --fn-success-300: #8FB98F; /* 8.41:1 no #17120F */ --fn-success-50: #E8EFE8; --fn-warning-500: #8A6A18; /* 4.77:1 no off-white */ --fn-warning-300: #D3B15C; /* 9.04:1 no #17120F */ --fn-warning-50: #F6EEDA; /* --------------------------------------------------------------------------- 1.7 Véus. Alpha sobre foto. Declarados aqui, usados nos dois temas. --------------------------------------------------------------------------- */ --veil-photo-bottom: linear-gradient(to top, rgba(15, 12, 10, 0.62) 0%, rgba(15, 12, 10, 0.28) 32%, rgba(15, 12, 10, 0) 58%); --veil-chrome: rgba(15, 12, 10, 0.55); --veil-lightbox: rgba(15, 12, 10, 0.97); --veil-hairline-up: rgba(250, 248, 245, 0.28); --veil-hairline-dn: rgba(38, 33, 30, 0.14); } /* ============================================================================= 2. SEMÂNTICA, TEMA CLARO Este bloco é a fonte da verdade. Os temas escuros abaixo só reapontam. ============================================================================= */ :root { /* ---------- 2.1 Superfícies ---------------------------------------------- */ --surface-page: var(--sand-50); /* fundo geral */ --surface-raised: var(--sand-0); /* cartão, sem sombra */ --surface-sunken: var(--sand-100); /* faixa de respiro e citação */ --surface-inset: var(--sand-150); /* bloco dentro de bloco */ --surface-contrast: var(--night-750); /* contador, seção da placa */ --surface-overlay: var(--night-1000); /* lightbox */ --surface-accent: var(--t-500); /* fita, tarja, marcador */ --surface-accent-strong: var(--t-600); /* botão primário */ --surface-accent-soft: var(--t-50); /* hover de botão secundário */ --surface-select: var(--j-600); /* chip de filtro ativo */ --surface-select-soft: var(--j-100); /* linha selecionada */ /* ---------- 2.2 Texto ---------------------------------------------------- */ --text-strong: var(--sand-900); /* título 15.02:1 na página */ --text-body: var(--sand-700); /* corrido 9.68:1 na página */ --text-muted: var(--sand-500); /* legenda 5.37:1 na página */ --text-accent: var(--t-500); /* display 4.63:1, >=18px */ --text-link: var(--t-700); /* link inline 7.34:1 */ --text-link-hover: var(--t-800); --text-on-accent: var(--sand-50); /* sobre --surface-accent-strong 5.52:1 */ --text-on-select: var(--sand-50); /* sobre --surface-select 8.08:1 */ --text-inverse: var(--night-50); /* sobre --surface-contrast 14.82:1 */ --text-inverse-body: var(--night-150); --text-inverse-muted: var(--night-300); /* sobre --surface-contrast 6.44:1 */ --text-on-photo: var(--night-100); /* sobre véu >= 11:1 */ --text-gold: var(--g-700); /* dourado que pode virar texto 6.14:1 */ --text-danger: var(--fn-danger-500); --text-success: var(--fn-success-500); --text-warning: var(--fn-warning-500); /* ---------- 2.3 Bordas e filetes ---------------------------------------- */ --border-hairline: var(--sand-200); /* separador de cartão, 1.25:1 */ --border-default: var(--sand-300); --border-strong: var(--sand-400); /* campo de formulário, 3.67:1 */ --border-accent: var(--t-500); --border-gold: var(--g-400); /* moldura do herói, filete de seção */ --border-on-dark: var(--veil-hairline-up); --border-select: var(--j-600); /* ---------- 2.4 Estados -------------------------------------------------- */ --state-hover-surface: rgba(38, 33, 30, 0.04); --state-active-surface: rgba(38, 33, 30, 0.08); --state-disabled-text: var(--sand-400); --state-disabled-fill: var(--sand-150); --focus-ring: var(--t-700); /* 7.34:1 contra a página */ --focus-ring-width: 2px; --focus-ring-offset: 2px; --selection-bg: var(--t-100); --selection-text: var(--sand-900); /* ---------- 2.5 Sombras. Quase tudo é none, por herança do tema antigo. -- */ --shadow-flat: none; --shadow-card: none; --shadow-card-hover: 0 1px 2px rgba(43, 33, 28, 0.05), 0 8px 24px -12px rgba(43, 33, 28, 0.14); --shadow-sticky: 0 1px 0 0 var(--border-hairline); --shadow-lightbox: 0 24px 64px -24px rgba(15, 12, 10, 0.70); --shadow-ribbon: -1px 0 0 0 rgba(43, 33, 28, 0.08); /* ============================================================================= 3. TIPOGRAFIA Display: Fraunces (variável, OFL). Texto: Source Serif 4 (variável, OFL). UI miúda: Archivo (variável, OFL). Três papéis, três famílias. ============================================================================= */ --font-display: "Fraunces", "Playfair Display", Georgia, "Times New Roman", serif; --font-text: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif; --font-ui: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; /* eixos variáveis do Fraunces, aplicados por classe de tamanho */ --fraunces-hero: "opsz" 144, "SOFT" 30, "WONK" 0; --fraunces-title: "opsz" 96, "SOFT" 20, "WONK" 0; --fraunces-sec: "opsz" 48, "SOFT" 14, "WONK" 0; --fraunces-card: "opsz" 24, "SOFT" 10, "WONK" 0; --fraunces-small: "opsz" 9, "SOFT" 0, "WONK" 0; /* ---------- 3.1 Escala. clamp entre 360px (mobile) e 1280px (desktop) ---- */ --fs-hero: clamp(2.75rem, 1.67rem + 4.78vw, 5.5rem); /* 44 -> 88 */ --fs-display-1: clamp(2.125rem, 1.59rem + 2.39vw, 3.5rem); /* 34 -> 56 */ --fs-display-2: clamp(1.625rem, 1.28rem + 1.52vw, 2.5rem); /* 26 -> 40 */ --fs-display-3: clamp(1.3125rem, 1.14rem + 0.76vw, 1.75rem); /* 21 -> 28 */ --fs-display-4: clamp(1.125rem, 1.03rem + 0.43vw, 1.375rem); /* 18 -> 22 */ --fs-lead: clamp(1.125rem, 1.03rem + 0.43vw, 1.375rem); /* 18 -> 22 */ --fs-body-lg: clamp(1.0625rem, 1.01rem + 0.22vw, 1.1875rem); /* 17 -> 19 */ --fs-body: clamp(1rem, 0.98rem + 0.11vw, 1.0625rem); /* 16 -> 17 */ --fs-body-sm: clamp(0.875rem, 0.85rem + 0.11vw, 0.9375rem); /* 14 -> 15 */ --fs-caption: 0.8125rem; /* 13 */ --fs-label: clamp(0.6875rem, 0.68rem + 0.11vw, 0.75rem); /* 11 -> 12 */ --fs-micro: 0.6875rem; /* 11 */ /* ---------- 3.2 Entrelinha ------------------------------------------------ */ --lh-hero: 0.95; --lh-display-1: 1.05; --lh-display-2: 1.15; --lh-display-3: 1.25; --lh-display-4: 1.35; --lh-lead: 1.55; --lh-body-lg: 1.7; --lh-body: 1.75; --lh-body-sm: 1.6; --lh-caption: 1.45; --lh-flat: 1; /* ---------- 3.3 Espacejamento -------------------------------------------- */ --tr-hero: 0.06em; /* caixa alta do herói */ --tr-title: -0.01em; /* display grande fecha um pouco */ --tr-normal: 0; --tr-label: 0.18em; /* caixa alta de rótulo */ --tr-label-lg: 0.22em; /* rótulo do contador e da fita */ --tr-ribbon: 0.32em; /* texto vertical da fita */ --tr-vertical: 0.5em; /* nomes soletrados na vertical */ --tr-micro: 0.08em; /* ---------- 3.4 Peso ----------------------------------------------------- */ --fw-light: 300; --fw-normal: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* ============================================================================= 4. GRID, MEDIDA E ESPAÇO ============================================================================= */ /* ---------- 4.1 Contêineres ---------------------------------------------- */ --container-max: 90rem; /* 1440px, limite absoluto */ --container-wide: 84rem; /* 1344px, galeria e faixas */ --container-content: 60rem; /* 960px, cartões e blocos de duas colunas */ --page-x: clamp(1.25rem, 4vw, 3rem); /* ---------- 4.2 Medida de leitura --------------------------------------- O site antigo entrega cerca de 1100px de coluna justificada em tela de 1366px, o que dá 100 a 110 caracteres por linha. Aqui: 65 caracteres. */ --measure: 37rem; /* 592px, prosa a --fs-body-lg, ~65 caracteres */ --measure-tight: 33rem; /* 528px, prosa a --fs-body, ~64 caracteres */ --measure-quote: 30rem; /* 480px, citação em display */ --measure-caption: 24rem; /* 384px, legenda de foto */ --rail: 12rem; /* 192px, faixa lateral de nota, data e crédito */ --rail-gap: 3rem; /* ---------- 4.3 Escala de espaço, base 4px ------------------------------- */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --space-9: 6rem; /* 96 */ --space-10: 8rem; /* 128 */ --space-11: 12rem; /* 192 */ /* ---------- 4.4 Ritmo vertical ------------------------------------------- */ --flow-tight: var(--space-3); /* entre linhas de um mesmo rótulo */ --flow-text: 1.15em; /* entre parágrafos, relativo ao corpo */ --flow-block: var(--space-6); /* entre blocos dentro de uma seção */ --section-y: clamp(4rem, 10vw, 8rem); /* entre seções */ --section-y-lg: clamp(6rem, 14vw, 12rem); /* virada de capítulo */ --gutter: 1.5rem; --gutter-tight: 1rem; /* ---------- 4.5 Cromo fixo ----------------------------------------------- */ --header-h: 4.5rem; /* 72px desktop */ --filterbar-h: 3.5rem; /* 56px, barra de filtro grudada sob o cabeçalho */ --ribbon-w: 2.5rem; /* 40px, largura da fita CASADOS */ --ribbon-h: 10.5rem; /* 168px, altura da etiqueta */ --ribbon-top: calc(var(--header-h) + var(--space-6)); --ribbon-h-sm: 1.75rem; /* 28px, a fita virada etiqueta horizontal */ --touch-min: 2.75rem; /* 44px, alvo mínimo de toque */ --btn-h: 2.875rem; /* 46px desktop, 44px no mobile */ --nav-gap: 2rem; /* entre os 7 itens da navegação */ /* ---------- 4.6 Galeria -------------------------------------------------- Modelo de grade definido em produto.md secao 3.3: coluna fixa, celula 3:2, foto em retrato ocupando 1 coluna por 2 linhas, tudo pre-gerado a partir do w e do h do manifesto. Sem JavaScript e sem medicao no cliente. */ --gallery-cols: 4; /* acima de 1200px. 3 em tablet, 2 em mobile */ --gallery-gap: 0.5rem; /* 8px, o respiro que faltava */ --gallery-gap-sm: 0.25rem; /* 4px, mobile */ --gallery-bleed: 1.5rem; /* 24px da viewport no desktop */ --gallery-bleed-md: 1rem; /* 16px em tablet */ --gallery-bleed-sm: 0.5rem; /* 8px em mobile */ --gallery-cell-ratio: 3 / 2; /* paisagem. Retrato usa 2 / 3 em 2 linhas */ --gallery-page: 240; /* fotos por pagina, divisivel por 4, 3 e 2 */ --gallery-hero-rows: 12; /* interrupcao de largura total a cada N linhas */ --gallery-hour-h: 3rem; /* altura do marcador de hora */ --gallery-ruler-h: 9rem; /* altura da regua da noite */ /* ---------- 4.7 Raio. Herdado do iCasei: borderRadius 4, rounded false. -- */ --radius-none: 0; /* FOTO. Foto nunca tem canto arredondado. */ --radius-xs: 2px; --radius-sm: 3px; --radius-md: 4px; /* BASE, herdada: cartão, botão, campo */ --radius-lg: 8px; /* só painel de diálogo */ --radius-pill: 999px; /* só chip de filtro */ /* ---------- 4.8 Filetes nomeados ---------------------------------------- */ --rule-hair: 1px solid var(--border-hairline); --rule-gold: 1px solid var(--border-gold); --rule-road: 1px dashed var(--g-300); /* a estrada, o pontilhado do iCasei */ --rule-deco-w: 5rem; /* filete sob o subtítulo de página */ /* ============================================================================= 5. MOVIMENTO ============================================================================= */ --dur-instant: 90ms; /* cor no hover, foco */ --dur-fast: 160ms; /* chip, tooltip, cromo do lightbox */ --dur-base: 240ms; /* abrir e fechar lightbox, expandir texto */ --dur-slow: 420ms; /* revelar bloco no scroll */ --dur-crawl: 900ms; /* só o fio de progresso da fita */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1); --reveal-shift: 12px; /* deslocamento do fade-in */ --reveal-stagger: 40ms; /* atraso por item, no máximo 6 itens */ /* ============================================================================= 6. CAMADAS ============================================================================= */ --z-base: 0; --z-raised: 10; --z-ribbon: 20; --z-filterbar: 25; --z-header: 30; --z-dropdown: 40; --z-lightbox: 80; --z-toast: 90; } /* ============================================================================= 7. AJUSTES DE ESCALA POR LARGURA ============================================================================= */ @media (max-width: 47.9375rem) { /* < 768px */ :root { --header-h: 3.75rem; /* 60px */ --gutter: 1rem; --btn-h: 2.75rem; /* 44px, piso de alvo de toque */ --gallery-cols: 2; --gallery-gap: var(--gallery-gap-sm); --gallery-bleed: var(--gallery-bleed-sm); --tr-label: 0.16em; --rail: 0; --rail-gap: 0; } } @media (min-width: 48rem) and (max-width: 74.9375rem) { /* 768px a 1199px */ :root { --gallery-cols: 3; --gallery-bleed: var(--gallery-bleed-md); } } @media (max-width: 63.9375rem) { /* < 1024px: a calha sai do layout */ :root { --rail: 0; --rail-gap: 0; } } /* Entre 1024px e 1199px a barra plana de 7 itens só cabe apertando o intervalo e o espacejamento. Abaixo de 1024px a navegação vira hambúrguer. */ @media (min-width: 64rem) and (max-width: 74.9375rem) { :root { --nav-gap: 1.25rem; --tr-label: 0.12em; } } /* ============================================================================= 8. TEMA ESCURO, POR PREFERÊNCIA DO SISTEMA Só reaponta tokens semânticos. Nenhuma cor nova nasce aqui. O :not([data-theme="light"]) garante que a escolha explícita do usuário vença. ============================================================================= */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --surface-page: var(--night-900); --surface-raised: var(--night-850); --surface-sunken: var(--night-950); --surface-inset: var(--night-800); --surface-contrast: var(--night-700); --surface-overlay: var(--night-1000); --surface-accent: var(--t-500); --surface-accent-strong: var(--t-600); --surface-accent-soft: var(--night-800); --surface-select: var(--j-600); --surface-select-soft: var(--night-800); --text-strong: var(--night-50); /* 16.28:1 */ --text-body: var(--night-150); /* 12.57:1 */ --text-muted: var(--night-300); /* 6.94:1 */ --text-accent: var(--t-300); /* 7.00:1 */ --text-link: var(--t-300); /* 7.00:1 */ --text-link-hover: var(--t-200); /* 10.39:1 */ --text-on-accent: var(--sand-50); /* 5.52:1 sobre --t-600 */ --text-on-select: var(--sand-50); /* 8.08:1 sobre --j-600 */ --text-inverse: var(--night-900); /* texto sobre preenchimento claro */ --text-inverse-body: var(--night-800); --text-inverse-muted: var(--night-700); --text-on-photo: var(--night-100); --text-gold: var(--g-300); /* 9.79:1 */ --text-danger: var(--fn-danger-300); --text-success: var(--fn-success-300); --text-warning: var(--fn-warning-300); --border-hairline: var(--night-700); --border-default: var(--night-600); --border-strong: var(--night-500); /* 3.50:1 */ --border-accent: var(--t-400); --border-gold: var(--g-500); --border-on-dark: var(--veil-hairline-up); --border-select: var(--j-300); --state-hover-surface: rgba(245, 239, 232, 0.06); --state-active-surface: rgba(245, 239, 232, 0.11); --state-disabled-text: var(--night-500); --state-disabled-fill: var(--night-800); --focus-ring: var(--t-200); /* 10.39:1 */ --selection-bg: var(--t-800); --selection-text: var(--night-50); --shadow-card-hover: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px -12px rgba(0, 0, 0, 0.70); --shadow-sticky: 0 1px 0 0 var(--night-700); --shadow-lightbox: 0 24px 64px -24px rgba(0, 0, 0, 0.85); --shadow-ribbon: -1px 0 0 0 rgba(0, 0, 0, 0.45); --rule-hair: 1px solid var(--night-700); --rule-gold: 1px solid var(--g-500); --rule-road: 1px dashed var(--g-600); } } /* ============================================================================= 9. TEMA ESCURO, POR ESCOLHA EXPLÍCITA Idêntico ao bloco 8. Vence a preferência do sistema nos dois sentidos. ============================================================================= */ [data-theme="dark"] { --surface-page: var(--night-900); --surface-raised: var(--night-850); --surface-sunken: var(--night-950); --surface-inset: var(--night-800); --surface-contrast: var(--night-700); --surface-overlay: var(--night-1000); --surface-accent: var(--t-500); --surface-accent-strong: var(--t-600); --surface-accent-soft: var(--night-800); --surface-select: var(--j-600); --surface-select-soft: var(--night-800); --text-strong: var(--night-50); --text-body: var(--night-150); --text-muted: var(--night-300); --text-accent: var(--t-300); --text-link: var(--t-300); --text-link-hover: var(--t-200); --text-on-accent: var(--sand-50); --text-on-select: var(--sand-50); --text-inverse: var(--night-900); --text-inverse-body: var(--night-800); --text-inverse-muted: var(--night-700); --text-on-photo: var(--night-100); --text-gold: var(--g-300); --text-danger: var(--fn-danger-300); --text-success: var(--fn-success-300); --text-warning: var(--fn-warning-300); --border-hairline: var(--night-700); --border-default: var(--night-600); --border-strong: var(--night-500); --border-accent: var(--t-400); --border-gold: var(--g-500); --border-on-dark: var(--veil-hairline-up); --border-select: var(--j-300); --state-hover-surface: rgba(245, 239, 232, 0.06); --state-active-surface: rgba(245, 239, 232, 0.11); --state-disabled-text: var(--night-500); --state-disabled-fill: var(--night-800); --focus-ring: var(--t-200); --selection-bg: var(--t-800); --selection-text: var(--night-50); --shadow-card-hover: 0 1px 2px rgba(0, 0, 0, 0.40), 0 8px 24px -12px rgba(0, 0, 0, 0.70); --shadow-sticky: 0 1px 0 0 var(--night-700); --shadow-lightbox: 0 24px 64px -24px rgba(0, 0, 0, 0.85); --shadow-ribbon: -1px 0 0 0 rgba(0, 0, 0, 0.45); --rule-hair: 1px solid var(--night-700); --rule-gold: 1px solid var(--g-500); --rule-road: 1px dashed var(--g-600); color-scheme: dark; } /* ============================================================================= 10. TEMA CLARO, POR ESCOLHA EXPLÍCITA Reafirma o claro quando o sistema está no escuro e o usuário pediu claro. ============================================================================= */ [data-theme="light"] { color-scheme: light; } /* ============================================================================= 11. PREFERÊNCIAS DE ACESSIBILIDADE ============================================================================= */ /* 11.1 Movimento reduzido. Zera duração e desliga o deslocamento do reveal. */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0.01ms; --dur-fast: 0.01ms; --dur-base: 0.01ms; --dur-slow: 0.01ms; --dur-crawl: 0.01ms; --reveal-shift: 0px; --reveal-stagger: 0ms; } } /* 11.2 Contraste alto. Filete de cabelo vira borda forte, terciário sobe. */ @media (prefers-contrast: more) { :root { --border-hairline: var(--border-strong); --border-default: var(--border-strong); --text-muted: var(--text-body); --text-accent: var(--t-700); --rule-hair: 1px solid var(--border-strong); } [data-theme="dark"], :root:not([data-theme="light"]) { --text-accent: var(--t-200); } } /* 11.3 Transparência reduzida. Substitui backdrop-filter por cor sólida. */ @media (prefers-reduced-transparency: reduce) { :root { --veil-chrome: var(--night-1000); --veil-lightbox: var(--night-1000); } } /* ============================================================================= 12. APLICAÇÃO MÍNIMA Só o suficiente para o arquivo ser verificável sozinho no navegador. O CSS de componente vive em outro arquivo. ============================================================================= */ html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--space-4)); } body { margin: 0; background-color: var(--surface-page); color: var(--text-body); font-family: var(--font-text); font-size: var(--fs-body); line-height: var(--lh-body); font-optical-sizing: auto; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } ::selection { background-color: var(--selection-bg); color: var(--selection-text); } :where(a, button, [tabindex], input, select, textarea, summary):focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-xs); } /* ============================================================================= CORREÇÃO: superfícies que são escuras NOS DOIS TEMAS ============================================================================= O contador, a régua de horas e o seletor usam --surface-contrast, que é escura tanto no tema claro quanto no escuro. Mas --text-inverse muda de significado entre os temas: no claro quer dizer "texto sobre fundo escuro", e no escuro foi reapontado para "texto sobre preenchimento claro". Resultado no celular em tema escuro: --text-inverse-muted virava exatamente a mesma cor do fundo (--night-700 sobre --night-700) e o texto sumia. Foi o que a Thay viu: "a parte de anos e dias nem aparece". Estes três tokens NÃO invertem. São sempre claros, porque a superfície embaixo deles é sempre escura. ========================================================================== */ :root, :root[data-theme="dark"], :root[data-theme="light"] { --text-on-contrast: var(--night-50); /* 16.28:1 sobre night-750 */ --text-on-contrast-body: var(--night-150); /* 12.57:1 */ --text-on-contrast-muted: var(--night-300); /* 6.94:1 */ --border-on-contrast: var(--veil-hairline-up); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --text-on-contrast: var(--night-50); --text-on-contrast-body: var(--night-150); --text-on-contrast-muted: var(--night-300); --border-on-contrast: var(--veil-hairline-up); /* a faixa escura precisa ficar MAIS escura que a pagina, nao igual */ --surface-contrast: var(--night-950); } }