/**
 * Design tokens for xdimaging.com. Canonical source: docs/STYLE_GUIDE.md — if these ever
 * disagree, that file wins and this should be fixed to match.
 */

@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/poppins-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/lato-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('../fonts/lato-700.woff2') format('woff2');
}

:root {
  /* Color */
  --color-paper: #f5f7f8;
  --color-paper-dim: #eaedef;
  --color-ink: #3c4754;
  --color-ink-muted: #89919a;
  --color-line: #dde1e4;
  --color-accent: #ff2c10;
  --color-accent-ink: #ffffff;

  /* Dark-surface colors (fourth-wave "more corporate" pass) -- xdevelop.at's own #414752 used as a
     background fill for large full-bleed bands (footer, closing CTA), not as a text-ink color --
     distinct from --color-ink (#3c4754), which stays the foreground/text tone on light surfaces.
     The two are intentionally close in value (both dark slate) rather than identical, so a dark
     band reads as "the same family, applied to a surface" rather than an unrelated second palette.
     STYLE_GUIDE.md had already flagged "a dark footer" as the anticipated next step when the
     light-only palette was first documented -- this is that step. */
  --color-surface-dark: #414752;
  --color-on-dark: #f5f7f8;
  --color-on-dark-muted: #b7bec5;

  /* Semantic (UI state) colors -- deliberately distinct from --color-accent, see STYLE_GUIDE.md */
  --color-success: #2e7d5b;
  --color-warning: #b4790e;
  --color-danger: #c0392b;

  /* Typography */
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Lato', -apple-system, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --text-display: clamp(2.4rem, 5vw, 3.4rem);
  --text-h2: 1.5rem;
  --text-lede: 1.125rem;
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-eyebrow: 0.78rem;
  --tracking-eyebrow: 0.11em;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Radius */
  --radius-sm: 7px;
  --radius-md: 12px;
  --radius-lg: 18px;

  --shadow-card: 0 1px 2px rgba(60, 71, 84, 0.07), 0 10px 30px rgba(60, 71, 84, 0.08);
  /* A visibly stronger lift than --shadow-card, for the white "content panel" elements that now
     sit on the page's own textured background (.site-header, .wizard, .container -- base.css/
     wizard.css) rather than on the flat --color-paper page background --shadow-card was tuned
     against. --shadow-card's low opacity reads as basically invisible against the hex texture;
     this one is deliberately more pronounced so the panel-on-texture layering is actually visible. */
  --shadow-panel: 0 6px 12px rgba(60, 71, 84, 0.22), 0 24px 48px rgba(60, 71, 84, 0.30);

  color-scheme: light;
}