/* Color roles measured from the public Toss Payments site. Layout and gray image files stay unchanged. */
:root {
  --toss-blue: #3182f6;
  --toss-blue-soft: rgba(26, 122, 249, .09);
  --toss-ink: #212529;
  --toss-muted: #727780;
  --toss-surface: #f2f4f5;
  --toss-line: #e5e8eb;
  --accent: var(--toss-blue);
  --accent-strong: #2272eb;
  --accent-soft: #e9f2ff;
  --ink: var(--toss-ink);
  --muted: var(--toss-muted);
  --line: var(--toss-line);
  --surface: var(--toss-surface);
  --dark: var(--toss-ink);
  --purple: var(--toss-blue);
  --purple-deep: #2272eb;
}
body { color: var(--toss-ink); }
.site-header, .hero, .ticker, .lab-section, .paths-section, .faq-section, .site-footer { background: #fff; }
.brand, .desktop-nav a, .hero h1, .lab-copy h2, .lab-intro h2, .paths-left h2, .faq-section h2, .footer-top .brand { color: var(--toss-ink); }
.desktop-nav a:hover, .footer-links a:hover { color: var(--toss-blue); }
.hero-lead, .lab-copy>p:not(.eyebrow), .path-caption, .faq-row p { color: var(--toss-muted); }
.nav-cta, .button-primary, .proof-cta, .lab-intro a { color: #fff; background: var(--toss-blue); }
.nav-cta:hover, .button-primary:hover, .proof-cta:hover, .lab-intro a:hover { background: #2272eb; }
.hero-art, .lab-visual, .path-stage { background: #d9d9d9; }
.ticker-heading { color: var(--toss-ink); }
.ticker-row span { color: var(--toss-muted); }
.why-section { background: var(--toss-surface); }
.why-section .section-heading h2 { color: var(--toss-ink); }
.why-card { background: #fff; border-color: var(--toss-line); }
.proof-label { color: var(--toss-muted); }
.proof-label .icon { color: var(--toss-blue); }
.why-card strong { color: var(--toss-ink); }
.lab-copy .eyebrow, .lab-intro p { color: var(--toss-muted); }
.lab-prompt { color: #9b9fa6; border-color: var(--toss-blue); box-shadow: 0 2px 6px rgba(49,130,246,.08); }
.lab-prompt span { background: var(--toss-blue); }
.lab-controls button { background: var(--toss-surface); color: var(--toss-muted); }
.lab-controls button[aria-selected=true] { color: #fff; background: var(--toss-blue); }
.method-section { color: #fff; background: var(--toss-ink); }
.method-section .section-heading h2, .method-summary b { color: #fff; }
.method-section .section-heading>p, .method-summary span, .method-list p { color: #b5bec7; }
.method-summary b .icon { color: #8bb9ff; }
.method-number { color: #8bb9ff; background: rgba(49,130,246,.14); border-color: rgba(139,185,255,.3); }
.method-list article, .method-list article:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.method-tag { color: #fff; }
.path-tabs, .path-tabs button { border-color: var(--toss-line); }
.path-tabs button { color: #b0b8c1; }
.path-tabs button[aria-selected=true] { color: var(--toss-ink); }
.path-stage { border: 0; }
.faq-row { border-color: var(--toss-line); }
.faq-row h3 { color: var(--toss-ink); }
.consult-section { background: var(--toss-surface); }
.consult-section:before { background: radial-gradient(circle,#fff 0 32%,#f2f4f5 32% 52%,#e9f2ff 52% 69%,#f2f4f5 69% 100%); }
.consult-grid h2, .consult-grid>p:not(.form-note) { color: var(--toss-ink); }
.consult-actions a { color: #2272eb; background: var(--toss-blue-soft); border-color: transparent; }
.consult-actions button { color: #fff; background: var(--toss-blue); border-color: var(--toss-blue); }
.consult-grid .form-note { color: var(--toss-muted); }
.footer-links span, .footer-bottom { color: #9b9fa6; }
.footer-bottom { border-color: var(--toss-line); }