/* ════════════════════════════════════════════════════════════════════════ CoraLink Design Tokens — HEX oficiais do Manual da Marca (Komunikativa). Espelha Resources/Styles/Colors.xaml dos apps Native. Alinhado 2026-08-31. Sprint 7 (2026-09-13) — Dark mode: bloco `[data-theme="dark"]` + fallback por `prefers-color-scheme`. Marca (coral/gradient) NÃO muda; só surfaces/texto. ════════════════════════════════════════════════════════════════════════ */ :root { /* Primárias coral (oficiais) — não mudam em dark */ --cora-primary: #DA483B; --cora-primary-dark: #C6323B; --cora-primary-light: #EB7148; --cora-primary-soft: #FCEAE6; --cora-on-primary: #FFFFFF; --cora-deep: #C6323B; --cora-gradient: linear-gradient(135deg, #EB7148, #C6323B); /* Sprint 3 (S3.5) — brand semântico + variações de opacidade (audit S1.8: 11 variações de rgba(218,72,59,alpha) espalhadas). */ --brand-primary: var(--cora-primary); --brand-dark: var(--cora-primary-dark); --brand-light: var(--cora-primary-light); --brand-alpha-04: rgba(218, 72, 59, 0.04); --brand-alpha-06: rgba(218, 72, 59, 0.06); --brand-alpha-07: rgba(218, 72, 59, 0.07); --brand-alpha-08: rgba(218, 72, 59, 0.08); --brand-alpha-10: rgba(218, 72, 59, 0.10); --brand-alpha-12: rgba(218, 72, 59, 0.12); --brand-alpha-14: rgba(218, 72, 59, 0.14); --brand-alpha-15: rgba(218, 72, 59, 0.15); --brand-alpha-18: rgba(218, 72, 59, 0.18); --brand-alpha-20: rgba(218, 72, 59, 0.20); --brand-alpha-28: rgba(218, 72, 59, 0.28); /* Semânticos extras identificados no audit S1.8 */ --white: #FFFFFF; --danger-deep: #9B1239; --success-deep: #166534; --success-soft-alt: #F0FDF4; --warning-deep: #92400E; --warning-soft-alt: #FFFBEB; --danger-soft-alt: #FFF2F5; /* Sprint 16.1 — par "info" (roxo/azul discreto) + par "muted" pra estados neutros como "descartado", "cancelado", "inativo". */ --info-deep: #4547B4; --info-soft-alt: #EEF0FF; --muted-deep: #4B5563; --muted-soft-alt: #F3F4F6; /* Texto / superfícies — LIGHT (default) */ --cora-text: #1F262D; --cora-text-soft: #5C6770; --cora-muted: #8B95A1; --cora-surface: #F6F7F9; --cora-surface-alt: #FAFBFC; --cora-card: #FFFFFF; --cora-border: #E6E9EC; --cora-border-soft: #F0F2F5; --cora-divider: #EDEFF2; /* Estados semânticos */ --cora-success: #0FB67A; --cora-success-soft: #E2F7EE; --cora-warning: #F2A93B; --cora-warning-soft: #FFF2DE; --cora-danger: #E5484D; --cora-danger-soft: #FCE8E9; --cora-info: #0F7FE8; --cora-info-soft: #E1EEFC; /* Status de solicitação (mesmos hex — visível em ambos os temas) */ --cora-status-pendente: #F2A93B; --cora-status-cotacao: #0F7FE8; --cora-status-propostas: #9C27B0; --cora-status-aceita: #0FB67A; --cora-status-cancelado: #8B95A1; --cora-status-expirado: #E5484D; /* Tipografia — não muda em dark */ --cora-font-display: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --cora-font-body: 'DM Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Spacing / radius / shadow — light */ --cora-radius: 14px; --cora-radius-sm: 10px; --cora-radius-lg: 18px; --cora-radius-pill: 999px; --cora-shadow: 0 4px 20px rgba(31,38,45,0.06), 0 1px 3px rgba(31,38,45,0.04); --cora-shadow-lg: 0 12px 36px rgba(31,38,45,0.10); /* Aliases legados — TODOS apontam pro coral. */ --cora-pink: var(--cora-primary); --cora-purple: var(--cora-primary); --cora-purple-soft: var(--cora-primary-soft); --cp-purple: var(--cora-primary); --cp-grad: var(--cora-gradient); --cp-text: var(--cora-text); --cp-muted: var(--cora-muted); --cp-border: var(--cora-border); --cp-surface: var(--cora-surface); --cp-radius: var(--cora-radius); --cp-shadow: var(--cora-shadow); } /* ── Dark mode ───────────────────────────────────────────────────────── Ativa quando: • `[data-theme="dark"]` no (toggle explícito), OU • sem `data-theme` e o usuário prefere dark no SO. Marca (coral, gradient, on-primary) e estados semânticos mantém hex — só surfaces e texto invertem. */ :root[data-theme="dark"], :root:not([data-theme="light"]) { /* Overrides SÓ dentro de @media abaixo */ } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cora-text: #E4E7EA; --cora-text-soft: #A8B0B8; --cora-muted: #7A838C; --cora-surface: #16191D; --cora-surface-alt: #1C2025; --cora-card: #22262C; --cora-border: #2D323A; --cora-border-soft: #262A31; --cora-divider: #26292F; /* Sprint 10 — Dark mode fix: 50 usos de `var(--white)` no app.css serviam como fundo de cards/inputs. Em dark viravam tocos brancos. Redefinindo aqui, todos escurecem juntos. */ --white: #22262C; --cora-primary-soft: rgba(218,72,59,0.18); --cora-success-soft: rgba(15,182,122,0.14); --cora-warning-soft: rgba(242,169,59,0.14); --cora-danger-soft: rgba(229,72,77,0.14); --cora-info-soft: rgba(15,127,232,0.14); /* Sprint 15 (S15.12) — WCAG AA em dark. Os `-deep` hex fixos (#166534, #92400E, #9B1239) foram desenhados pra fundos claros. Sobre fundo dark #22262C + soft-alpha 0.14, o contraste caía abaixo de 3:1 — texto quase ilegível em chips/badges. Aqui inverto: pastel claro pra ficar >4.5:1. Testado com WebAIM contrast checker. */ --success-deep: #4ADE80; --warning-deep: #FBBF24; --danger-deep: #F87171; --info-deep: #A5B4FC; --muted-deep: #D1D5DB; /* Alt soft — versões mais visíveis pra fundos de badge/chip. */ --success-soft-alt: rgba(15,182,122,0.18); --warning-soft-alt: rgba(242,169,59,0.20); --danger-soft-alt: rgba(229,72,77,0.18); --info-soft-alt: rgba(88,101,242,0.22); --muted-soft-alt: rgba(148,163,184,0.20); --cora-shadow: 0 4px 20px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.20); --cora-shadow-lg: 0 12px 36px rgba(0,0,0,0.45); /* Aliases legados também tokenizados — TODOS os text/border/surface precisam ser refresh pra que classes que usam --cp-* peguem dark. */ --cp-text: var(--cora-text); --cp-muted: var(--cora-muted); --cp-border: var(--cora-border); --cp-surface: var(--cora-surface); --cp-shadow: var(--cora-shadow); } } :root[data-theme="dark"] { --cora-text: #E4E7EA; --cora-text-soft: #A8B0B8; --cora-muted: #7A838C; --cora-surface: #16191D; --cora-surface-alt: #1C2025; --cora-card: #22262C; --cora-border: #2D323A; --cora-border-soft: #262A31; --cora-divider: #26292F; /* Sprint 10 — mesma lógica: --white vira escuro em dark pra todos os `var(--white)` de cards/inputs/header serem cinza escuro em vez de branco. */ --white: #22262C; --cora-primary-soft: rgba(218,72,59,0.18); --cora-success-soft: rgba(15,182,122,0.14); --cora-warning-soft: rgba(242,169,59,0.14); --cora-danger-soft: rgba(229,72,77,0.14); --cora-info-soft: rgba(15,127,232,0.14); /* Sprint 15 (S15.12) — WCAG AA em dark. Mesmo raciocínio do bloco @media prefers-color-scheme: -deep hex claros pra texto sobre soft dark. */ --success-deep: #4ADE80; --warning-deep: #FBBF24; --danger-deep: #F87171; --info-deep: #A5B4FC; --muted-deep: #D1D5DB; --success-soft-alt: rgba(15,182,122,0.18); --warning-soft-alt: rgba(242,169,59,0.20); --danger-soft-alt: rgba(229,72,77,0.18); --info-soft-alt: rgba(88,101,242,0.22); --muted-soft-alt: rgba(148,163,184,0.20); --cora-shadow: 0 4px 20px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.20); --cora-shadow-lg: 0 12px 36px rgba(0,0,0,0.45); /* Aliases legados refreshados pro tema dark. */ --cp-text: var(--cora-text); --cp-muted: var(--cora-muted); --cp-border: var(--cora-border); --cp-surface: var(--cora-surface); --cp-shadow: var(--cora-shadow); } /* Baseline do documento — pinta o body pra evitar "flash of white" no toggle. */ html { background: var(--cora-surface); color: var(--cora-text); } body { background: var(--cora-surface); color: var(--cora-text); }