/* * FIRMO — design tokens v2 (proposta "Sign with Confidence") * Fonte única de cores, tipografia e componentes básicos. * Páginas que suportam tema escuro adicionam data-firmo-dark ao . */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/includes/fonts/inter-var-latin.woff2') format('woff2'); } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/includes/fonts/lora-var-latin.woff2') format('woff2'); } @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/includes/fonts/caveat-var-latin.woff2') format('woff2'); } @font-face { font-family: 'Great Vibes'; font-style: normal; font-weight: 400; font-display: swap; src: url('/includes/fonts/great-vibes-latin.woff2') format('woff2'); } @font-face { font-family: 'Dancing Script'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/includes/fonts/dancing-script-var-latin.woff2') format('woff2'); } @font-face { font-family: 'Pacifico'; font-style: normal; font-weight: 400; font-display: swap; src: url('/includes/fonts/pacifico-latin.woff2') format('woff2'); } @font-face { font-family: 'Satisfy'; font-style: normal; font-weight: 400; font-display: swap; src: url('/includes/fonts/satisfy-latin.woff2') format('woff2'); } :root { /* superfícies e texto */ --f-bg: #F4F8FC; --f-chrome: #FFFFFF; --f-ink: #152A44; --f-muted: #5B6E85; --f-line: #D9E4F0; /* marca */ --f-brand: #1B4D8F; --f-brand-deep: #0F2B52; --f-brand-hover: #163F76; /* interação */ --f-sky: #4A9FE5; --f-sky-soft: #EAF3FC; /* semântica: verde = assinado/verificado */ --f-verified: #2E8B57; --f-verified-strong: #227247; --f-verified-soft: #E6F5EC; /* avisos e erros */ --f-warn-soft: #FDF3DC; --f-warn-text: #8A5A00; --f-danger: #B42318; --f-danger-soft: #FBEAE8; --f-danger-text: #A93226; /* papel: o documento é sempre branco, em qualquer tema */ --f-paper: #FFFFFF; --f-paper-ink: #1C2B3A; --f-paper-muted: #64748B; --f-paper-line: #E2E8F0; --f-pen: #14284A; --f-shadow: 0 10px 30px rgba(15, 43, 82, 0.10); --f-radius: 14px; --f-btn-bg: var(--f-brand); --f-btn-fg: #FFFFFF; --f-focus-ring: 0 0 0 3px rgba(74, 159, 229, 0.45); --f-font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-font-display: 'Lora', Georgia, serif; --f-font-script: 'Caveat', 'Brush Script MT', cursive; } @media (prefers-color-scheme: dark) { :root[data-firmo-dark] { --f-bg: #0A1728; --f-chrome: #101F36; --f-ink: #E2ECF8; --f-muted: #93A7C2; --f-line: #233A5C; --f-brand: #5EA3EC; --f-brand-hover: #7BB4F0; --f-sky-soft: #14273F; --f-verified: #4DBE84; --f-verified-strong: #5CDB95; --f-verified-soft: #123023; --f-warn-soft: #33260C; --f-warn-text: #EFC26B; --f-danger-soft: #351512; --f-danger-text: #F0A199; --f-shadow: 0 10px 30px rgba(2, 8, 18, 0.5); --f-btn-bg: #3D7BD0; } } /* ---------- básicos ---------- */ .f-focusable :is(a, button, input, select, textarea, [tabindex]):focus-visible, :is(.f-btn, .f-chip, a.f-link):focus-visible { outline: none; box-shadow: var(--f-focus-ring); border-radius: 8px; } /* ---------- botões ---------- */ .f-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 11px; padding: 10px 16px; font-family: var(--f-font-ui); font-weight: 700; font-size: 14px; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s, opacity .15s; } .f-btn-primary { background: var(--f-btn-bg); color: var(--f-btn-fg); } .f-btn-primary:hover:not(:disabled) { background: var(--f-brand-hover); } .f-btn-ghost { background: transparent; color: var(--f-brand); border-color: var(--f-line); } .f-btn-ghost:hover:not(:disabled) { border-color: var(--f-brand); } .f-btn-verified { background: var(--f-verified); color: #fff; } .f-btn-verified:hover:not(:disabled) { background: var(--f-verified-strong); } .f-btn-danger { background: var(--f-danger); color: #fff; } .f-btn:disabled { opacity: .45; cursor: not-allowed; } /* ---------- chips de status (estados reais do sistema) ---------- */ .f-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--f-font-ui); font-size: 12px; font-weight: 700; border-radius: 999px; padding: 4px 12px; border: 1px solid transparent; white-space: nowrap; } .f-chip::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: currentColor; flex: none; } .f-chip--progress { background: var(--f-sky-soft); color: var(--f-brand); } .f-chip--waiting { background: var(--f-warn-soft); color: var(--f-warn-text); } .f-chip--signed { background: var(--f-verified-soft); color: var(--f-verified-strong); } .f-chip--expired { background: var(--f-line); color: var(--f-muted); } .f-chip--blocked { background: var(--f-danger-soft); color: var(--f-danger-text); } /* ---------- cartões e avisos ---------- */ .f-card { background: var(--f-chrome); border: 1px solid var(--f-line); border-radius: var(--f-radius); box-shadow: var(--f-shadow); } .f-notice { border-radius: 12px; padding: 12px 14px; font-size: 14px; font-weight: 600; border: 1px solid transparent; } .f-notice--ok { background: var(--f-verified-soft); color: var(--f-verified-strong); } .f-notice--err { background: var(--f-danger-soft); color: var(--f-danger-text); }