/* SharpQuote design tokens. Generated from tokens.json; do not edit by hand. */
/* Fonts: self-host the files in /fonts (paths below assume they are served from /fonts/). */
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("/fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/fonts/figtree-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --sq-navy-900: #0D1B2A;
  --sq-navy-800: #142638;
  --sq-navy-700: #1D3550;
  --sq-teal-400: #2EC4B6;
  --sq-teal-600: #1A9E92;
  --sq-teal-700: #0B7A70;
  --sq-teal-100: #E3F7F4;
  --sq-slate-600: #4B5563;
  --sq-slate-400: #7E8896;
  --sq-slate-200: #D9E0E6;
  --sq-slate-100: #F3F6F8;
  --sq-white: #FFFFFF;
  --sq-mark-grey: #6B7380;
  --sq-surface: #FFFFFF;
  --sq-surface-sunken: #F3F6F8;
  --sq-surface-raised: #FFFFFF;
  --sq-brand-block: #0D1B2A;
  --sq-ink: #0D1B2A;
  --sq-ink-muted: #4B5563;
  --sq-line: #D9E0E6;
  --sq-accent: #2EC4B6;
  --sq-on-accent: #0D1B2A;
  --sq-accent-text: #0B7A70;
  --sq-success: #276D2B;
  --sq-success-soft: #E4F4E5;
  --sq-warning: #A15C07;
  --sq-warning-soft: #FDF1E0;
  --sq-error: #B91C1C;
  --sq-error-soft: #FDE8E8;
  --sq-focus: #1D3550;
  --sq-space-1: 4px;
  --sq-space-2: 8px;
  --sq-space-3: 12px;
  --sq-space-4: 16px;
  --sq-space-6: 24px;
  --sq-space-8: 32px;
  --sq-space-12: 48px;
  --sq-radius-sm: 6px;
  --sq-radius-md: 10px;
  --sq-radius-lg: 16px;
  --sq-radius-pill: 999px;
  --sq-shadow-card: 0 1px 2px rgba(13,27,42,0.06), 0 4px 12px rgba(13,27,42,0.06);
  --sq-font-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --sq-font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Navy theme: website header and hero, dark mode. Apply data-theme="navy" to any element. */
[data-theme="navy"] {
  --sq-surface: #0D1B2A;
  --sq-surface-sunken: #142638;
  --sq-surface-raised: #1A2E45;
  --sq-brand-block: #1D3550;
  --sq-ink: #FFFFFF;
  --sq-ink-muted: #B4C0CC;
  --sq-line: #2B425E;
  --sq-accent: #2EC4B6;
  --sq-on-accent: #0D1B2A;
  --sq-accent-text: #2EC4B6;
  --sq-success: #8BD48E;
  --sq-success-soft: #163A2A;
  --sq-warning: #F8C471;
  --sq-warning-soft: #3B2C14;
  --sq-error: #FCA5A5;
  --sq-error-soft: #3F1D24;
  --sq-focus: #2EC4B6;
  --sq-shadow-card: 0 1px 2px rgba(0,0,0,0.3);
  color-scheme: dark;
}

/* Type styles */
.sq-display { font-family: var(--sq-font-display); font-size: 56px; line-height: 60px; font-weight: 800; letter-spacing: -0.02em; }
.sq-h1 { font-family: var(--sq-font-display); font-size: 40px; line-height: 46px; font-weight: 800; letter-spacing: -0.015em; }
.sq-h2 { font-family: var(--sq-font-display); font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.01em; }
.sq-h3 { font-family: var(--sq-font-display); font-size: 22px; line-height: 28px; font-weight: 700; }
.sq-body-lg { font-family: var(--sq-font-sans); font-size: 18px; line-height: 28px; font-weight: 400; }
.sq-body { font-family: var(--sq-font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.sq-body-strong { font-family: var(--sq-font-sans); font-size: 16px; line-height: 24px; font-weight: 600; }
.sq-small { font-family: var(--sq-font-sans); font-size: 14px; line-height: 20px; font-weight: 400; }
.sq-label { font-family: var(--sq-font-sans); font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.02em; }
.sq-figure { font-family: var(--sq-font-sans); font-size: 16px; line-height: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sq-footer-note { font-family: var(--sq-font-sans); font-size: 9px; line-height: 12px; font-weight: 500; }

/* Base */
body { background: var(--sq-surface); color: var(--sq-ink); font-family: var(--sq-font-sans); }
:focus-visible { outline: 2px solid var(--sq-focus); outline-offset: 2px; }
.sq-num, td.amount, .amount { font-variant-numeric: tabular-nums; }

/* Core components */
.sq-btn { display: inline-flex; align-items: center; gap: var(--sq-space-2); font: 600 16px/20px var(--sq-font-sans); padding: var(--sq-space-3) 18px; border-radius: var(--sq-radius-md); border: 0; cursor: pointer; text-decoration: none; }
.sq-btn-primary { background: var(--sq-accent); color: var(--sq-on-accent); }
.sq-btn-primary:hover { background: var(--sq-teal-600); }
.sq-btn-secondary { background: transparent; color: var(--sq-ink); box-shadow: inset 0 0 0 1.5px var(--sq-line); }
[data-theme="navy"] .sq-btn-secondary { box-shadow: inset 0 0 0 1.5px var(--sq-ink-muted); }
.sq-link { color: var(--sq-accent-text); text-underline-offset: 2px; }
.sq-badge { display: inline-flex; align-items: center; gap: var(--sq-space-1); font: 600 13px/16px var(--sq-font-sans); letter-spacing: .02em; padding: 2px var(--sq-space-2); border-radius: var(--sq-radius-pill); }
.sq-badge-success { background: var(--sq-success-soft); color: var(--sq-success); }
.sq-badge-warning { background: var(--sq-warning-soft); color: var(--sq-warning); }
.sq-badge-error { background: var(--sq-error-soft); color: var(--sq-error); }
.sq-card { background: var(--sq-surface-raised); border: 1px solid var(--sq-line); border-radius: var(--sq-radius-lg); padding: var(--sq-space-6); }
.sq-input { font: 400 16px/24px var(--sq-font-sans); color: var(--sq-ink); background: var(--sq-surface); border: 1px solid var(--sq-line); border-radius: var(--sq-radius-sm); padding: 10px var(--sq-space-3); }
.sq-input::placeholder { color: var(--sq-slate-400); }
.sq-highlight-row { background: var(--sq-teal-100); color: var(--sq-teal-700); font-weight: 600; }