/* VIRA Construction — design tokens. Generated from the VIRA design system (brand kit v2.1 + flier v3). */

:root, [data-theme="sand"] {
  --char: #1f1210;
  --sand: #f5ece5;
  --terracotta: #d5502b;
  --clay: #7a6250;
  --keystone: #d34437;
  --terracotta-deep: #5e2513;
  --clay-light: #cbb9a9;
  --graphite: #33302e;
  --sand-dim: #e9dfd4;
  --char-soft: #2a1d18;
  --ghost-sand: #e9ddd3;
  --ghost-char: #2b1e1a;
  --surface: var(--sand);
  --surface-inverse: var(--char);
  --surface-raised: var(--sand-dim);
  --ghost: var(--ghost-sand);
  --ink: var(--char);
  --ink-inverse: var(--sand);
  --ink-muted: var(--clay);
  --accent: var(--terracotta);
  --on-accent: var(--char);
  --accent-tint: rgba(213, 80, 43, 0.2);
  --hairline: rgba(31, 18, 16, 0.16);
  --hairline-on-accent: rgba(31, 18, 16, 0.25);
}

[data-theme="char"] {
  --surface: var(--char);
  --surface-inverse: var(--sand);
  --surface-raised: var(--char-soft);
  --ghost: var(--ghost-char);
  --ink: var(--sand);
  --ink-inverse: var(--char);
  --ink-muted: var(--clay-light);
  --hairline: rgba(245, 236, 229, 0.16);
}

:root {
  --space-icon-gap: 8px;
  --space-chip-gap: 10px;
  --space-row: 21px;
  --space-block: 32px;
  --space-page: 51px;
  --radius-none: 0px;
  --radius-round: 50%;
  --stroke-hairline: 1px;
  --stroke-accent-bar: 2px;
  --font-display: Archivo, "Archivo SemiExpanded", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* Type styles — one class per style, prefixed t- (e.g. class="t-headline") */
.t-display-xl { font-family: var(--font-display); font-size: 49px; line-height: 1.0; font-weight: 700; letter-spacing: 0; font-stretch: 112.5%; text-transform: uppercase; }
.t-stat-figure { font-family: var(--font-display); font-size: 36px; line-height: 1.0; font-weight: 700; font-stretch: 112.5%; text-transform: uppercase; }
.t-proof-figure { font-family: var(--font-display); font-size: 34px; line-height: 1.0; font-weight: 700; font-stretch: 112.5%; text-transform: uppercase; }
.t-headline { font-family: var(--font-display); font-size: 29px; line-height: 1.05; font-weight: 700; font-stretch: 112.5%; text-transform: uppercase; }
.t-cta-headline { font-family: var(--font-display); font-size: 26px; line-height: 1.03; font-weight: 700; font-stretch: 112.5%; text-transform: uppercase; }
.t-title { font-family: var(--font-display); font-size: 18px; line-height: 1.18; font-weight: 700; }
.t-label { font-family: var(--font-display); font-size: 18px; line-height: 1.2; font-weight: 600; }
.t-step-label { font-family: var(--font-display); font-size: 17px; line-height: 1.2; font-weight: 600; }
.t-lead { font-family: var(--font-serif); font-size: 22px; line-height: 30px; font-weight: 400; }
.t-body { font-family: var(--font-serif); font-size: 16px; line-height: 21px; font-weight: 400; }
.t-body-sm { font-family: var(--font-serif); font-size: 15px; line-height: 20px; font-weight: 400; }
.t-eyebrow { font-family: var(--font-mono); font-size: 13px; line-height: 17px; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; }
.t-tagline { font-family: var(--font-mono); font-size: 14px; line-height: 18px; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; }
.t-label-mono { font-family: var(--font-mono); font-size: 13px; line-height: 17px; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; }
.t-contact { font-family: var(--font-mono); font-size: 15px; line-height: 20px; font-weight: 400; letter-spacing: 0.1em; }
.t-chip { font-family: var(--font-mono); font-size: 13px; line-height: 17px; font-weight: 400; }