/* Constructions Signature Gauthier — generated from tokens.json */

/* IBM Plex Sans (one variable file, weights 400–700) and Plex Mono, latin subset, self-hosted (SIL OFL).
   The « fallback » faces are Arial and Menlo/Courier resized to Plex's measurements, so the text keeps
   its place while the real fonts arrive and nothing jumps when they swap in. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/IBMPlexSans-var.woff2?v=ad80f4285c") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/IBMPlexMono-400.woff2?v=0ab7372b85") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/IBMPlexMono-500.woff2?v=bfa0781788") format("woff2"); }
@font-face { font-family: "Plex Sans fallback"; font-weight: 400 500; src: local("Arial"), local("ArialMT"); size-adjust: 100.7%; ascent-override: 101.8%; descent-override: 27.3%; line-gap-override: 0%; }
@font-face { font-family: "Plex Sans fallback"; font-weight: 600 700; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 98.5%; ascent-override: 104.1%; descent-override: 27.9%; line-gap-override: 0%; }
@font-face { font-family: "Plex Mono fallback"; src: local("Menlo"), local("Courier New"), local("CourierNewPSMT"); size-adjust: 100%; ascent-override: 102.5%; descent-override: 27.5%; line-gap-override: 0%; }
:root, [data-theme="light"] {
  --ink: #111111;
  --ink-2: #1d1d1f;
  --muted: #6e6e73;
  --muted-strong: #555555;
  --paper: #ffffff;
  --stone: #f3f2ee;
  --mist: #ececea;
  --field-fill: #f5f5f7;
  --pad: #e8e8ed;
  --pad-hover: #dcdce0;
  --pad-on-photo: rgba(232, 232, 237, 0.92);
  --line: #e3e3e6;
  --field-border: #8e8e93;
  --graphite: #121212;
  --night: #0b0b0b;
  --slate: #3a3d40;
  --line-dark: #2a2a2a;
  --on-dark: #ffffff;
  --on-dark-muted: #cfcfcf;
  --on-dark-soft: #bdbdbd;
  --on-dark-faint: #8a8a8a;
  --gold: #e3a82b;
  --gold-hover: #f0be45;
  --gold-pressed: #cc9318;
  --on-gold: var(--ink);
  --disabled: #c9c9c9;
  --on-disabled: #f4f4f4;
  --required: #b4231b;
  --glass: rgba(20, 20, 20, 0.42);
  --glass-chip: rgba(20, 20, 20, 0.45);
  --glass-border: rgba(255, 255, 255, 0.18);
  --scrim: rgba(0, 0, 0, 0.75);
  --scrim-soft: rgba(0, 0, 0, 0.45);
  --overlay: rgba(10, 10, 10, 0.62);
  --bar: rgba(255, 255, 255, 0.96);
  --shadow-cta: 0 6px 18px rgba(0, 0, 0, 0.35);
  --shadow-pad: 0 4px 14px rgba(0, 0, 0, 0.25);
  --shadow-knob: 0 2px 10px rgba(0, 0, 0, 0.25);
  --shadow-ring: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-wipe: 0 0 20px 3px rgba(255, 255, 255, 0.45);
  --shadow-logo: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-slide: 0 18px 40px rgba(0, 0, 0, 0.14);
  --shadow-dialog: 0 30px 80px rgba(0, 0, 0, 0.5);
  --shadow-sheet: 0 -12px 40px rgba(0, 0, 0, 0.22);
  --shadow-bar: 0 -6px 20px rgba(0, 0, 0, 0.08);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --radius-none: 0px;
  --radius-m: 10px;
  --radius-l: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --radius-round: 50%;
  --content-width: 880px;
  --page-width: 1280px;
  --hero-height: 800px;
  --hero-height-mobile: 844px;
  --slide-height: 512px;
  --slide-mobile: 330px;
  --logo-hero: 124px;
  --logo-mobile: 46px;
  --tap-target: 44px;
  --cta-height: 58px;
  --font-sans: "IBM Plex Sans", "Plex Sans fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "Plex Mono fallback", ui-monospace, "SF Mono", Menlo, monospace;
}
.display-xl { font-family: var(--font-sans); font-size: 52px; line-height: 1.04; font-weight: 700; letter-spacing: -0.03em; }
.display-l { font-family: var(--font-sans); font-size: 44px; line-height: 1.04; font-weight: 700; letter-spacing: -0.03em; }
.display-m { font-family: var(--font-sans); font-size: 40px; line-height: 1.05; font-weight: 700; letter-spacing: -0.03em; }
.display-s { font-family: var(--font-sans); font-size: 32px; line-height: 1.06; font-weight: 700; letter-spacing: -0.03em; }
.heading { font-family: var(--font-sans); font-size: 28px; line-height: 1.08; font-weight: 700; letter-spacing: -0.02em; }
.caption-l { font-family: var(--font-sans); font-size: 22px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em; }
.dialog-title { font-family: var(--font-sans); font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
.body-l { font-family: var(--font-sans); font-size: 17px; line-height: 1.55; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 1.55; font-weight: 400; }
.field { font-family: var(--font-sans); font-size: 16px; line-height: 1.45; font-weight: 400; }
.button-l { font-family: var(--font-sans); font-size: 16px; line-height: 1; font-weight: 700; }
.button { font-family: var(--font-sans); font-size: 15px; line-height: 1; font-weight: 700; }
.control { font-family: var(--font-sans); font-size: 14px; line-height: 1; font-weight: 600; }
.field-label { font-family: var(--font-sans); font-size: 14px; line-height: 1.3; font-weight: 500; }
.label { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.label-s { font-family: var(--font-mono); font-size: 11px; line-height: 1.4; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.label-xs { font-family: var(--font-mono); font-size: 10px; line-height: 1.4; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }