/* ========================================================================== ASA RENT A CAR: TOKENS Sistema de Identidade v3.2 (B2C, amarelo dominante) Camada 1: primitivos, a escala bruta. NUNCA usar direto em componente. Camada 2: semânticos, o papel na interface. É o que componente consome. Trocar a v3.2 pela v3.1 (B2B, vermelho dominante) = trocar só a camada 2. ========================================================================== */ /* -------------------------------------------------------------------------- TIPOGRAFIA: BR Omny 5 faces das 14 instaladas. Thin/Light/SemiBold e os demais itálicos não têm uso especificado no sistema; carregá-los seria peso morto. A face Black normal existe como defesa: sem ela, um font-weight:900 sem itálico cairia no Bold e ninguém perceberia. -------------------------------------------------------------------------- */ @font-face { font-family: 'BR Omny'; src: url('../assets/fonts/BROmny-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'BR Omny'; src: url('../assets/fonts/BROmny-Medium.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'BR Omny'; src: url('../assets/fonts/BROmny-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'BR Omny'; src: url('../assets/fonts/BROmny-Black.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; } /* block, não swap: um flash de Helvetica Bold Italic em display de 64px caixa alta é dano de marca visível. Em corpo de 16px, não é. */ @font-face { font-family: 'BR Omny'; src: url('../assets/fonts/BROmny-BlackItalic.otf') format('opentype'); font-weight: 900; font-style: italic; font-display: block; } :root { /* ======================================================================== CAMADA 1: PRIMITIVOS ======================================================================== */ /* Cor da marca */ --asa-yellow: #FEC42B; --asa-yellow-hover: #EAB227; /* hover do amarelo (botão secundário) */ --asa-black: #141517; --asa-red: #E80911; /* Cinza ultraclaro neutro, sem viés de matiz: a superfície de composição e da camada flutuante (modal, popover, menu). Qualquer tom de amarelo fica reservado ao acento deliberado (capa, badge, assinatura); o neutro claro do sistema é este cinza, nunca um amarelo diluído. Consumido por --asa-bg e --asa-surface-float. */ --asa-mist: #F4F4F3; --asa-red-dark: #C4070E; --asa-green: #065F46; --asa-black-deep: #0D0D0E; --asa-white: #FFFFFF; /* Cinzas de texto. Os dois últimos só existem sobre fundo escuro. */ --asa-gray-body: #4A4C50; --asa-gray-caption: #5A5C60; --asa-gray-dark-1: #8A8C90; --asa-gray-dark-2: #A8AAAE; /* Estados e superfícies auxiliares */ --asa-disabled-bg: #F2F2F0; --asa-disabled-text: #A8AAAE; --asa-placeholder: #E4E0DA; /* Famílias */ --asa-font: 'BR Omny', 'Helvetica Neue', Helvetica, Arial, sans-serif; --asa-font-mono: ui-monospace, 'SF Mono', Menlo, monospace; /* ======================================================================== CAMADA 2: SEMÂNTICOS A regra "vermelho é só ação" só é executável se o componente escrever var(--asa-action). Escrevendo var(--asa-red), a regra vira folclore. ======================================================================== */ --asa-surface: var(--asa-yellow); /* superfície principal da marca */ --asa-bg: var(--asa-mist); /* superfície de composição; nunca o fundo padrão de body (ver asa-base.css) */ --asa-bg-elevated: var(--asa-white); /* card, superfície elevada */ --asa-bg-deep: var(--asa-black-deep); /* peça noturna, rodapé, vídeo */ --asa-bg-dense: var(--asa-black); /* bloco de informação densa */ --asa-action: var(--asa-red); /* SOMENTE ação */ --asa-action-hover: var(--asa-red-dark); /* hover, pressionado, foco, erro */ --asa-on-action: var(--asa-white); /* texto sobre vermelho: só puro */ --asa-ink: var(--asa-black); /* todo texto principal */ --asa-ink-2: var(--asa-gray-body); /* corpo secundário sobre claro */ --asa-ink-3: var(--asa-gray-caption);/* legenda sobre claro */ --asa-ink-inverse: var(--asa-white); /* texto sobre escuro */ --asa-ink-inverse-2: var(--asa-gray-dark-2); /* apoio sobre escuro */ --asa-ok: var(--asa-green); /* reserva feita, pagamento ok */ --asa-line: rgba(20, 21, 23, .14); /* borda sobre claro */ --asa-line-soft: rgba(20, 21, 23, .12); /* divisor interno de card */ --asa-line-inverse: rgba(255, 255, 255, .16);/* borda sobre escuro */ --asa-line-strong: rgba(20, 21, 23, .30); /* aresta de contato de sticky */ /* Canal de atenção. Sem ele, "esgotado", "restam 2", "documento recusado" e "campo inválido" disputariam o mesmo vermelho que é o orçamento do CTA. --asa-warn nunca é ação: não leva onClick. O tom fecha 5,02:1 sobre --asa-warn-bg e 5,58:1 sobre branco, os dois pares onde o canal aparece (tag, alerta). O mínimo de 4,5:1 para texto normal vale contra cada fundo pareado, não só contra branco. */ --asa-warn: #A35200; /* laranja escuro: 5,58:1 sobre branco, 5,02:1 sobre --asa-warn-bg */ --asa-warn-bg: #FDF1E4; /* fundo do alerta de atenção */ /* Superfícies de interação: hover e seleção, compartilhadas por campo, choice, menu e calendário. */ --asa-surface-hover: rgba(20, 21, 23, .04); --asa-surface-selected: rgba(254, 196, 43, .12); /* amarelo em baixíssima opacidade, nunca sólido em área grande */ /* Camada e sobreposição: base dos componentes flutuantes (asa-overlay, asa-modal, asa-sheet, asa-popover, asa-menu). Escala de 10 em 10 para deixar vão de inserção sem renumerar tudo. */ --asa-z-sticky: 1000; --asa-z-dropdown: 1010; /* combobox, date picker: precisa vencer o header sticky embaixo dele */ --asa-z-overlay: 1200; --asa-z-modal: 1210; --asa-z-popover: 1220; /* pode abrir por cima de um modal (ex.: tooltip dentro de um formulário) */ --asa-z-toast: 1300; --asa-scrim: rgba(13, 13, 14, .56); /* --asa-black-deep em opacidade, nunca puro preto */ --asa-surface-float: var(--asa-mist); /* superfície de modal, sheet, popover e menu */ /* Offset de header. 70px calibrado para a navbar de 54px desta documentação; o header de produto (duas camadas) recalcula este valor. */ --asa-header-h: 70px; --asa-icon-dense: 16px; /* ícone dentro de card e chip, abaixo do --asa-icon-inline de 24px */ /* ======================================================================== TIPOGRAFIA: 5 degraus, base 8. Nada entre eles. ======================================================================== */ --asa-fs-display: 64px; --asa-lh-display: 60px; --asa-fs-title: 32px; --asa-lh-title: 36px; --asa-fs-highlight: 20px; --asa-lh-highlight: 28px; --asa-fs-body: 16px; --asa-lh-body: 26px; --asa-fs-label: 12px; --asa-lh-label: 16px; --asa-fs-mono: 11px; /* Escala de UI. A escala acima é de CONTEÚDO, "nada entre eles". Componente de produto tem densidade que o conteúdo não tem (título de card, botão, contagem de filtro); forçar os dois na mesma régua produz tamanhos soltos no código. Esta é a escala paralela, nomeada, com o MESMO piso de 12px: tag e categoria usam --asa-fs-label, nunca menos. --asa-fs-mono é o único valor abaixo de 12px, e só para o rótulo mono decorativo de seção; texto de produto (tag, contagem, atributo) nunca usa --asa-fs-mono. */ --asa-fs-subtitle: 17px; --asa-lh-subtitle: 24px; /* título de card */ --asa-fs-body-dense: 14px; --asa-lh-body-dense: 20px; /* botão, choice, denso, rótulo de campo */ --asa-fs-lead: 18px; --asa-lh-lead: 28px; /* lide de seção: a frase sob o H2 */ /* Registro de NUMERAL: preço e nota, não conteúdo nem UI de chrome. .asa-price__value e .asa-numberplate usam clamp() fluido próprio; este é o mesmo registro na densidade de card, onde o valor precisa ser fixo, não fluido. */ --asa-fs-price-card: 24px; /* Versões fluidas de display e título. Ancoradas em cqi, não em vw: dentro de um container travado em 1200px, vw continua crescendo e o display descola da medida de linha acima de ~1400px. Sem container ancestral, cqi cai no viewport pequeno e o comportamento é o de vw. */ --asa-fs-display-fluid: clamp(38px, 6.4cqi, 64px); --asa-fs-title-fluid: clamp(24px, 3.2cqi, 32px); --asa-tracking-display: -.03em; /* display (H1), Registro 1 */ --asa-tracking-title: -.01em; /* título de seção, Registro 2 */ --asa-tracking-number: -.05em; /* placa de número */ --asa-tracking-price: -.04em; /* preço */ --asa-tracking-label: .2em; /* etiqueta caixa alta */ --asa-tracking-mono: .14em; /* rótulo mono de seção */ --asa-weight-regular: 400; --asa-weight-medium: 500; --asa-weight-bold: 700; --asa-weight-black: 900; /* Largura máxima de bloco de texto: ~65 caracteres em 16px/26. Acima disso o olho perde a linha ao voltar. */ --asa-measure: 640px; /* ======================================================================== ESPAÇAMENTO. Nomeado por índice, não por pixel: o índice é estável, o valor por trás dele pode evoluir sem renomear token. ======================================================================== */ --asa-space-1: 4px; --asa-space-2: 8px; --asa-space-3: 12px; --asa-space-4: 16px; --asa-space-5: 20px; --asa-space-6: 24px; --asa-space-7: 32px; --asa-space-8: 40px; --asa-space-9: 56px; --asa-space-10: 64px; --asa-space-11: 90px; /* ======================================================================== GRID E LAYOUT ======================================================================== */ --asa-container-max: 1200px; --asa-columns: 12; --asa-gutter: 24px; --asa-safe-fold: 680px; /* altura útil da primeira dobra */ /* Layout de duas colunas. 1200px de container menos padding deixa ~1020px: sidebar (280) + 3 cards de vitrine fica apertado sem este token existir para a régua toda concordar no mesmo valor. */ --asa-sidebar-w: 280px; /* Breakpoints. Custom property não funciona dentro de @media; estes existem para leitura e para JS, e as media queries repetem o valor. */ --asa-bp-tablet: 768px; --asa-bp-desktop: 1024px; /* Respiro entre faixas: 72px no celular, 120px no desktop. Menos que 72px não separa duas faixas de fundo diferente no celular. */ --asa-section-pad-y: clamp(72px, 8vw, 120px); --asa-section-pad-x: clamp(20px, 6vw, 90px); /* ======================================================================== FORMA radius 8px em botão, card e campo. 50% só em avatar. Etiqueta de benefício tem radius zero, de propósito: é o que a diferencia de um botão à primeira vista. Nada mais é arredondado. Nenhuma sombra em lugar nenhum: a marca é chapada; elevação se resolve com borda e contraste de fundo. ======================================================================== */ --asa-radius: 8px; --asa-radius-full: 50%; --asa-border-width: 1.5px; --asa-control-h: 48px; /* altura de botão e campo */ --asa-touch-min: 44px; /* alvo de toque mínimo */ --asa-icon-inline: 24px; --asa-icon-feature: 48px; --asa-icon-stroke: 1.5; /* mesma espessura da borda de card */ /* ======================================================================== GEOMETRIA PROPRIETÁRIA: a regra dos 8° O ângulo do logo, subindo para a direita. É o único ângulo do sistema. A subida é expressa em unidade de LARGURA (cqw) porque tan(8°) relaciona altura a largura: com porcentagem de altura o ângulo mudaria a cada proporção de caixa. tan(8°) = 0.14054. ======================================================================== */ --asa-angle: 8deg; --asa-rise: 14.05cqw; /* ======================================================================== MOVIMENTO Teto absoluto de 400ms. Sem bounce, sem elástico, sem rotação. Números nunca sobem em contador: aparecem inteiros, de uma vez. ======================================================================== */ --asa-dur-fast: 200ms; /* entrada do logo, por opacidade */ --asa-dur-default: 240ms; /* entrada de texto no eixo de 8° */ --asa-dur-scene: 320ms; /* wipe de transição de cena */ --asa-dur-max: 400ms; /* limite geral */ --asa-ease: ease-out; --asa-ease-in: ease-in; /* saída de overlay, sheet e drawer; a entrada usa --asa-ease */ } /* Respeitar quem pediu menos movimento. Declarado junto dos tokens, não no fim da implementação, para que nenhum componente nasça fora da regra. */ @media (prefers-reduced-motion: reduce) { :root { --asa-dur-fast: 1ms; --asa-dur-default: 1ms; --asa-dur-scene: 1ms; --asa-dur-max: 1ms; } }