/**
 * OneChain Global Design System — element + utility layer.
 *
 * ALL colour, type and shape values live in css/tokens.css, which MUST be loaded
 * immediately before this file:
 *     <link rel="stylesheet" href="css/tokens.css">
 *     <link rel="stylesheet" href="css/global.css">
 * This file deliberately declares NO :root block — one source of truth only.
 */

/* ===== Base ===== */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body), var(--font-cjk), sans-serif;
  font-weight: var(--weight-body);
  color: var(--oc-text);
  background: var(--oc-bg);
  line-height: 1.6;
}

/* Brand typeface — Inter Bold for headlines */
h1, h2, h3, h4,
.oc-type-brand,
.oc-type-headline {
  font-family: var(--font-brand), var(--font-cjk), sans-serif;
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--oc-heading);
}

/* Sub-headline / buttons / tags — Inter Bold */
.oc-type-subhead,
.oc-type-button,
button,
.btn-primary,
.btn-outline,
.btn-dark,
.btn-green,
.btn-gold,
.btn-ghost,
.sc-btn-primary,
.sc-btn-ghost,
.hero-btn,
.reclaim-cta,
.reclaim-cta-outline,
.product-row-cta,
.blockchain-services-cta,
.ai-cta,
.fp-chip,
.fp-btn,
.fp-tag,
.lane-cta {
  font-family: var(--font-brand), var(--font-cjk), sans-serif;
  font-weight: var(--oc-btn-font-weight);
}

/* ===== Global button / chip shape (image 1 — not pills) ===== */
.oc-btn,
.btn,
.btn-primary,
.btn-outline,
.btn-dark,
.btn-green,
.btn-gold,
.btn-ghost,
.sc-btn-primary,
.sc-btn-ghost,
.hero-btn,
.hero-btn--primary,
.hero-btn--ghost,
.reclaim-cta,
.reclaim-cta-outline,
.product-row-cta,
.blockchain-services-cta,
.ai-cta,
.fp-btn,
.fp-chip,
.fp-tag,
.btn-line {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--oc-btn-gap);
  padding: var(--oc-btn-pad-y) var(--oc-btn-pad-x);
  min-height: 36px;
  box-sizing: border-box;
  border-radius: var(--radius-btn) !important; /* soft rectangle — never pill */
  font-size: var(--oc-btn-font-size);
  font-weight: var(--oc-btn-font-weight);
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Filled CTA — same as Create free account (#14a4bc)
   (Product CTAs keep their own brand colours — ESG green / Cert teal / Wills blue) */
.oc-btn,
.oc-btn--secondary,
.btn-primary,
.btn-dark,
.hero-btn--primary,
.blockchain-services-cta,
.sc-btn-primary,
.reclaim-cta,
.ai-cta,
.fp-btn {
  background: var(--oc-btn-bg, #14a4bc);
  color: var(--oc-btn-text, #fff);
  border: none;
  box-shadow: 0 8px 24px rgba(20, 164, 188, 0.28);
}
.oc-btn:hover,
.oc-btn--secondary:hover,
.btn-primary:hover,
.btn-dark:hover,
.hero-btn--primary:hover,
.blockchain-services-cta:hover,
.sc-btn-primary:hover,
.reclaim-cta:hover,
.ai-cta:hover,
.fp-btn:hover {
  background: var(--oc-btn-bg-hover, #0d7d91);
  color: var(--oc-btn-text, #fff);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(20, 164, 188, 0.34);
}

/* Outline / ghost — same soft rectangle shape */
.btn-outline,
.btn-ghost,
.btn-line,
.hero-btn--ghost,
.reclaim-cta-outline,
.sc-btn-ghost,
.fp-chip,
.fp-tag {
  background: var(--oc-surface);
  color: var(--oc-text);
  border: 1px solid var(--oc-border-strong);
  box-shadow: none;
}
.btn-outline:hover,
.btn-ghost:hover,
.btn-line:hover,
.hero-btn--ghost:hover,
.reclaim-cta-outline:hover,
.sc-btn-ghost:hover,
.fp-chip:hover,
.fp-tag:hover {
  background: var(--oc-surface-alt);
  border-color: var(--oc-btn-bg);
  color: var(--oc-btn-bg);
}

/* Body text — Inter */
p, li, label, input, textarea, .oc-type-body {
  font-family: var(--font-body), var(--font-cjk), sans-serif;
  font-weight: var(--weight-body);
}

/* Supporting text typeface — Inter Medium, uppercase, tracked
   Use for eyebrows, labels, tags (e.g. "ENTERPRISE BLOCKCHAIN") */
.oc-type-supporting {
  font-family: var(--font-supporting), var(--font-cjk), sans-serif;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-supporting);
  text-transform: uppercase;
}

/* Supplementary / sub typeface — ticker style
   Inter, uppercase, tracked, muted bluish-gray */
.oc-type-sub,
.ticker-item {
  font-family: var(--font-sub), var(--font-cjk), sans-serif;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-sub);
  text-transform: uppercase;
}

.ticker .ticker-item {
  color: var(--oc-on-dark);
}

/* Section eyebrows / tags — supporting text, primary accent */
.eyebrow,
.blockchain-services-eyebrow,
.reclaim-eyebrow,
.ai-eyebrow,
.glass-header .eyebrow,
.quotes-head .eyebrow,
.video-header .eyebrow,
.section-eyebrow,
.ecosystem-tag,
.backed-by .eyebrow,
.sc-col-title,
.sc-fcol h5,
.fig-label {
  font-family: var(--font-supporting), var(--font-cjk), sans-serif;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-supporting);
  text-transform: uppercase;
}

/* ===== Problem / Answer pattern (shared) =====
   Brand Guideline §04: the red/pink pair (--oc-alert / --oc-alert-soft) is a
   Supplementary Color reserved specifically "for alert content" — a problem
   statement is exactly that, so its tag uses the brand alert red, not a
   neutral grey. The paired answer/solution tag uses the brand accent blue.
   Reusable across any page that ships this two-column contrast pattern. */
.s-problem .s-tag,
.oc-problem-tag {
  color: var(--oc-alert);
}
.s-solution .s-tag,
.oc-answer-tag {
  color: var(--oc-accent);
}

/* ===== Site footer (shared) — gray bg, reverse-white logo ===== */
.sc-footer,
.site-footer,
footer.footer {
  background: var(--oc-footer-bg);
  color: var(--oc-footer-text);
  border-top: none;
}

.sc-footer-brand img,
.site-footer .logo-img--footer,
.footer-brand img,
.footer .logo-img {
  /* Footer uses images/brand/onchain-logo-white.png (teal mark + reverse-white CHAIN) */
  filter: none;
}

.sc-footer-brand p,
.site-footer-tagline,
.footer-brand p {
  color: var(--oc-footer-text);
}

/* Footer column headings — brand blue */
.sc-fcol h5,
.site-footer-col h4,
.footer-col h4,
.footer-col h5 {
  color: var(--oc-blue-light, #3cbdd2);
}

.sc-fcol a,
.site-footer-col a,
.footer-col a {
  color: var(--oc-footer-text);
}

.sc-fcol a:hover,
.site-footer-col a:hover,
.footer-col a:hover {
  color: var(--oc-footer-text-strong);
}

.sc-footer-bottom,
.site-footer-bottom,
.footer-bottom {
  border-top-color: var(--oc-footer-border);
}

.sc-footer-bottom p,
.site-footer-legal,
.footer-bottom,
.footer-bottom p {
  color: var(--oc-footer-muted);
}

.sc-footer-tagline,
.site-footer-motto {
  color: var(--oc-footer-accent);
}

.sc-footer-bottom a,
.site-footer-legal a,
.footer-bottom a {
  color: var(--oc-footer-muted);
}

.sc-footer-bottom a:hover,
.site-footer-legal a:hover,
.footer-bottom a:hover {
  color: var(--oc-footer-text-strong);
}