/* ============================================================ ARCHION — design tokens + base. Light only. Font: Cabin. Accent: Archion red #b93a32. Cabin is loaded via in each page . ============================================================ */ :root { /* Accent — Archion red */ --color-accent: #b93a32; --color-accent-ink: #b93a32; --color-accent-dim: rgba(185,58,50,0.09); --btn-accent-fg: #ffffff; /* Surfaces — light, warm */ --bg: #faf8f7; --bg-surface: #ffffff; --bg-elevated: #f3efee; --border: rgba(0,0,0,0.10); --text: #1a1416; --text-muted: #6b5f5d; /* Status */ --status-paid: #15803D; --status-sent: #D97706; --status-overdue: #DC2626; --status-draft: #6B7280; /* Layout */ --content-max: 1100px; --radius: 8px; --radius-sm: 4px; --font-sans: 'Cabin', system-ui, -apple-system, sans-serif; } /* ── Reset + base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-sans); font-size: 14px; background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-sans); } a { color: var(--color-accent); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Buttons ── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: var(--radius-sm); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: opacity 0.15s; } .btn:hover { opacity: 0.85; } .btn-primary { background: var(--color-accent); color: var(--btn-accent-fg); } .btn-ghost { background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); } /* ── Utilities ── */ .text-muted { color: var(--text-muted); } .divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; } /* iOS Safari auto-zoom fix */ @media (max-width: 768px) { input, textarea, select { font-size: 16px; } }