/* Semantic design tokens — override per theme via [data-theme] on */ :root, [data-theme="light"] { color-scheme: light; --ht-bg: #f8fafc; --ht-surface: #ffffff; --ht-surface-muted: #f1f5f9; --ht-border: #00000014; --ht-text: #111827; --ht-text-muted: #6b7280; --ht-link: #2563eb; --ht-link-hover: #1d4ed8; --ht-accent: #0a84ff; --ht-btn-neutral-bg: linear-gradient( to bottom, #ffffff, #f7fafc ); --ht-btn-neutral-border: #cfd8e3; --ht-btn-neutral-text: #0f172a; --ht-btn-neutral-hover-border: #9aa9bc; --ht-btn-primary-bg: linear-gradient( to bottom, #2563eb, #1d4ed8 ); --ht-btn-primary-border: #1e40af; --ht-btn-primary-text: #ffffff; --ht-btn-primary-hover-bg: linear-gradient( to bottom, #1e56e5, #1b46c6 ); --ht-btn-primary-hover-border: #1c3f9e; --ht-btn-danger-bg: linear-gradient( to bottom, #dc2626, #b91c1c ); --ht-btn-danger-border: #991b1b; --ht-btn-danger-text: #ffffff; --ht-btn-danger-hover-bg: linear-gradient( to bottom, #ef4444, #dc2626 ); --ht-btn-danger-hover-border: #b91c1c; --ht-focus-ring: rgba( 59, 130, 246, 0.35 ); --ht-focus-ring-strong: rgba( 59, 130, 246, 0.45 ); --ht-shadow-sm: 0 1px 3px rgba( 0, 0, 0, 0.08 ); --ht-shadow-md: 0 2px 10px rgba( 0, 0, 0, 0.08 ); --ht-input-bg: #ffffff; --ht-input-border: #cbd5e1; --ht-input-text: #111827; --ht-card: var( --ht-surface ); --ht-primary: var( --ht-link ); --ht-muted: var( --ht-text-muted ); } [data-theme="dark"] { color-scheme: dark; --ht-bg: #0f172a; --ht-surface: #1e293b; --ht-surface-muted: #334155; --ht-border: #ffffff18; --ht-text: #f1f5f9; --ht-text-muted: #94a3b8; --ht-link: #60a5fa; --ht-link-hover: #93c5fd; --ht-accent: #38bdf8; --ht-btn-neutral-bg: linear-gradient( to bottom, #334155, #1e293b ); --ht-btn-neutral-border: #475569; --ht-btn-neutral-text: #f8fafc; --ht-btn-neutral-hover-border: #64748b; --ht-btn-primary-bg: linear-gradient( to bottom, #3b82f6, #2563eb ); --ht-btn-primary-border: #1d4ed8; --ht-btn-primary-text: #ffffff; --ht-btn-primary-hover-bg: linear-gradient( to bottom, #60a5fa, #3b82f6 ); --ht-btn-primary-hover-border: #2563eb; --ht-btn-danger-bg: linear-gradient( to bottom, #ef4444, #dc2626 ); --ht-btn-danger-border: #b91c1c; --ht-btn-danger-text: #ffffff; --ht-btn-danger-hover-bg: linear-gradient( to bottom, #f87171, #ef4444 ); --ht-btn-danger-hover-border: #dc2626; --ht-focus-ring: rgba( 96, 165, 250, 0.4 ); --ht-focus-ring-strong: rgba( 96, 165, 250, 0.55 ); --ht-shadow-sm: 0 1px 3px rgba( 0, 0, 0, 0.35 ); --ht-shadow-md: 0 2px 10px rgba( 0, 0, 0, 0.4 ); --ht-input-bg: #1e293b; --ht-input-border: #475569; --ht-input-text: #f1f5f9; --ht-card: var( --ht-surface ); --ht-primary: var( --ht-link ); --ht-muted: var( --ht-text-muted ); } [data-theme="classic"] { color-scheme: light; --ht-bg: #eef2f7; --ht-surface: #ffffff; --ht-surface-muted: #e8edf3; --ht-border: #00000020; --ht-text: #1a1a1a; --ht-text-muted: #5c6b7a; --ht-link: steelblue; --ht-link-hover: #4a7aa8; --ht-accent: steelblue; --ht-btn-neutral-bg: linear-gradient( to bottom, #ffffff, #eef2f7 ); --ht-btn-neutral-border: #b8c4d0; --ht-btn-neutral-text: #1a1a1a; --ht-btn-neutral-hover-border: #8fa3b8; --ht-btn-primary-bg: linear-gradient( to bottom, #5a9fd4, steelblue ); --ht-btn-primary-border: #4682b4; --ht-btn-primary-text: #ffffff; --ht-btn-primary-hover-bg: linear-gradient( to bottom, #6aadde, #5a9fd4 ); --ht-btn-primary-hover-border: #3d6d96; --ht-btn-danger-bg: linear-gradient( to bottom, #c53030, #a00000 ); --ht-btn-danger-border: #800000; --ht-btn-danger-text: #ffffff; --ht-btn-danger-hover-bg: linear-gradient( to bottom, #e53e3e, #c53030 ); --ht-btn-danger-hover-border: #a00000; --ht-focus-ring: rgba( 70, 130, 180, 0.35 ); --ht-focus-ring-strong: rgba( 70, 130, 180, 0.5 ); --ht-shadow-sm: 0 1px 2px rgba( 0, 0, 0, 0.1 ); --ht-shadow-md: 0 2px 8px rgba( 0, 0, 0, 0.12 ); --ht-input-bg: #ffffff; --ht-input-border: #b8c4d0; --ht-input-text: #1a1a1a; --ht-card: var( --ht-surface ); --ht-primary: var( --ht-link ); --ht-muted: var( --ht-text-muted ); } /* ——— Buttons ——— */ .button, a.button, button.button, input.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.4em; padding: 0.45em 0.9em; border-radius: 0.45em; border: 1px solid var( --ht-btn-neutral-border ); background: var( --ht-btn-neutral-bg ); color: var( --ht-btn-neutral-text ); font-size: inherit; font-weight: 600; letter-spacing: 0.2px; text-decoration: none; cursor: pointer; transition: box-shadow 120ms ease, transform 120ms ease, border-color 120ms ease, background 120ms ease; } .button:hover, a.button:hover, button.button:hover, input.button:hover { box-shadow: var( --ht-shadow-md ); transform: translateY( -1px ); border-color: var( --ht-btn-neutral-hover-border ); } .button:active, a.button:active, button.button:active, input.button:active { transform: translateY( 0 ); box-shadow: var( --ht-shadow-sm ); } .button:focus, a.button:focus, button.button:focus, input.button:focus { outline: none; box-shadow: 0 0 0 3px var( --ht-focus-ring ); border-color: var( --ht-link ); } .button:disabled, button.button:disabled, input.button:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .button-primary, a.button-primary, button.button-primary, input.button-primary { background: var( --ht-btn-primary-bg ); color: var( --ht-btn-primary-text ); border-color: var( --ht-btn-primary-border ); } .button-primary:hover, a.button-primary:hover, button.button-primary:hover, input.button-primary:hover { background: var( --ht-btn-primary-hover-bg ); border-color: var( --ht-btn-primary-hover-border ); } .button-primary:focus, a.button-primary:focus, button.button-primary:focus, input.button-primary:focus { box-shadow: 0 0 0 3px var( --ht-focus-ring-strong ); } .button-danger, a.button-danger, button.button-danger, input.button-danger { background: var( --ht-btn-danger-bg ); color: var( --ht-btn-danger-text ); border-color: var( --ht-btn-danger-border ); } .button-danger:hover, a.button-danger:hover, button.button-danger:hover, input.button-danger:hover { background: var( --ht-btn-danger-hover-bg ); border-color: var( --ht-btn-danger-hover-border ); } .button-danger:focus, a.button-danger:focus, button.button-danger:focus, input.button-danger:focus { box-shadow: 0 0 0 3px rgba( 220, 38, 38, 0.35 ); } a.button.credit { background-color: #0a0; color: #fffd; border-color: #080; } a.button.debit { background-color: #a00; color: #fffd; border-color: #800; }