/* ============================================================
   BASE
   Design tokens, CSS custom properties, global reset,
   typography defaults, and shared utility classes.
   Everything here is foundational — all other files depend on it.
   Load this first.
   ============================================================ */


/* ── Design tokens: light theme (default) ── */
:root,
[data-theme="light"] {
  --color-bg: #f8f8f6;
  --color-panel: #ffffff;
  --color-accent: #1a78b2;
  --color-blue: #1a78b2;
  --color-text: #111111;
  --color-text-muted: #454545;
  --color-text-faint: #666666;
  --color-hairline: rgba(0, 0, 0, 0.09);
  --color-on-accent: #ffffff;

  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 4px 20px rgba(0, 0, 0, 0.08);

  --work-before-bg: #e8e8e8;
  --work-after-bg: #f0f0f0;

  /* Alpha variant of the light-mode --color-blue for .btn-blue ghost border */
  --color-blue-border: rgba(26, 120, 178, 0.28);

  /* Light-mode-only card hover surface — slightly off-white */
  --color-surface-hover: #fafafa;
}

/* ── Design tokens: dark theme overrides ── */
[data-theme="dark"] {
  --color-bg: #09090b;
  --color-panel: #111113;
  --color-accent: #6BAFE0;
  --color-blue: #6BAFE0;
  --color-text: #e4e4e4;
  --color-text-muted: #a8a8a8;
  --color-text-faint: #8a8a8a;
  --color-hairline: rgba(255, 255, 255, 0.08);
  --color-on-accent: #ffffff;

  --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.45);
  --shadow-card-hover: 0 4px 18px rgba(0, 0, 0, 0.35);

  /* Before/after card slot backgrounds */
  --work-before-bg: #0d0d0f;
  --work-after-bg: #111113;

  /* Alpha variant of --color-blue used for the .btn-blue ghost border */
  --color-blue-border: rgba(107, 175, 224, 0.28);
}

/* ── Theme-agnostic tokens: fonts, radii, easing, layout, fixed colours ── */
:root {
  --font-display: 'Sora', sans-serif;
  --font-body: 'Urbanist', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --radius-btn: 4px;
  --radius-panel: 8px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-theme: 0.3s;

  --max-width: 1200px;

  /* ── Fixed colours: these never switch between themes ────────────────
     The hero section always renders on a dark cinematic background
     regardless of the user's light/dark preference. These tokens are
     defined here (not inside a theme block) so they cannot be overridden
     by [data-theme="light"].
     ──────────────────────────────────────────────────────────────────── */

  /* Hero background — always the near-black dark canvas */
  --color-hero-bg: #09090b;

  /* The dark-theme blue, locked. Used inside [data-theme="light"] rules
     on the hero where we explicitly need the lighter, more visible blue
     rather than the darker light-mode blue. */
  --color-blue-dark: #6BAFE0;

  /* Dark-theme blue at 45% opacity — used for the hero .btn-blue border
     in light-mode context, where the hero background is still dark. */
  --color-blue-dark-hero-border: rgba(107, 175, 224, 0.45);
}


/* ── Box-model reset ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Root / document ── */
html {
  min-height: 100vh;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

/* ── Body: background, text, font smoothing, theme transition ── */
body {
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  transition:
    background-color var(--duration-theme) var(--ease-out),
    color var(--duration-theme) var(--ease-out);
}

/* ── Heading defaults ── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
}

/* ── Link defaults ── */
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}

a:hover {
  color: var(--color-text);
}


/* ── Utility: muted text ── */
.text-muted {
  color: var(--color-text-muted);
}

/* ── Utility: screen-reader only, visually hidden ── */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Utility: spec / price label-value pair ──
   Used inside service cards to display duration and price.
   .spec--lg makes the value number larger (for the price). */
.spec {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.spec__label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-faint);
  line-height: 1;
}

.spec__value {
  font-family: var(--font-mono);
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--color-text);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.spec--lg .spec__value {
  font-size: 1.75rem;
  font-weight: 600;
}

/* ── Main landmark: ensures it layers above any decorative backgrounds ── */
main {
  position: relative;
  z-index: 1;
}

/* ── Media: never wider than their container ── */
img,
video {
  max-width: 100%;
  height: auto;
}

/* ── Long URLs, emails, and unbroken strings wrap instead of overflowing ── */
a,
p,
li,
.terms-page__meta {
  overflow-wrap: anywhere;
}


/* ── Reduced motion: disable scroll-behavior ── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}