/*
 * tokens.css
 * TC Health — Private Scans Page
 * Generated from design/design-spec.json v1.0.0
 *
 * RULE: No hard-coded values anywhere else.
 *       Always reference a token defined here.
 */

:root {
  /* ─── Colors: Brand ──────────────────────────────── */
  --color-primary: #f55201;
  --color-primary-hover: #d04d18;
  --color-primary-light: #fef0ea;
  --color-secondary: #240f41;
  --color-secondary-hover: #1a0b30;
  --color-accent: #f5a623;

  /* ─── Colors: Text ──────────────────────────────── */
  --color-text-heading: #240f41;
  --color-text-body: #555555;
  --color-text-muted: #555555;
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-muted: #a0b0c4;

  /* ─── Colors: Background ────────────────────────── */
  --color-bg-white: #ffffff;
  --color-bg-light: #f7f8fa;
  --color-bg-mid: #eef0f4;
  --color-bg-dark: #240f41;
  --color-bg-dark-deep: #122238;

  /* ─── Colors: Border ────────────────────────────── */
  --color-border-default: #e2e6ed;
  --color-border-subtle: #f0f2f5;
  --color-border-dark: #2e4a68;

  /* ─── Colors: Status ────────────────────────────── */
  --color-success: #38a169;
  --color-success-light: #f0fff4;

  /* ─── Typography: Families ───────────────────────── */
  --font-base: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Inter", "Helvetica Neue", Arial, sans-serif;

  /* ─── Typography: Headings ───────────────────────── */
  --text-h1-size: 48px;
  --text-h1-height: 1.2;
  --text-h1-weight: 700;
  --text-h1-spacing: -0.02em;

  --text-h2-size: 32px;
  --text-h2-height: 1.25;
  --text-h2-weight: 700;
  --text-h2-spacing: -0.01em;

  --text-h3-size: 22px;
  --text-h3-height: 1.35;
  --text-h3-weight: 600;

  --text-h4-size: 18px;
  --text-h4-height: 1.4;
  --text-h4-weight: 600;

  --text-h5-size: 15px;
  --text-h5-height: 1.4;
  --text-h5-weight: 600;
  --text-h5-spacing: 0.01em;

  /* ─── Typography: Body ───────────────────────────── */
  --text-body-lg-size: 18px;
  --text-body-lg-height: 1.7;
  --text-body-md-size: 18px;
  --text-body-md-height: 1.65;
  --text-body-sm-size: 13px;
  --text-body-sm-height: 1.6;
  --text-body-xs-size: 11px;
  --text-body-xs-height: 1.5;

  /* ─── Typography: Label ──────────────────────────── */
  --text-label-size: 11px;
  --text-label-weight: 700;
  --text-label-spacing: 0.08em;

  /* ─── Spacing ─────────────────────────────────────── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* ─── Border Radius ──────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ─── Shadows ─────────────────────────────────────── */
  --shadow-sm:
    0 1px 3px rgba(26, 46, 74, 0.08), 0 1px 2px rgba(26, 46, 74, 0.04);
  --shadow-md:
    0 4px 12px rgba(26, 46, 74, 0.1), 0 2px 4px rgba(26, 46, 74, 0.06);
  --shadow-lg:
    0 8px 24px rgba(26, 46, 74, 0.12), 0 4px 8px rgba(26, 46, 74, 0.06);
  --shadow-card: 0 2px 8px rgba(26, 46, 74, 0.08);

  /* ─── Buttons ─────────────────────────────────────── */
  --btn-padding-y: 12px;
  --btn-padding-x: 24px;
  --btn-font-size: 18px;
  --btn-font-weight: 600;
  --btn-radius: var(--radius-sm);
  --btn-transition:
    background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;

  /* ─── Cards ───────────────────────────────────────── */
  --card-bg: var(--color-bg-white);
  --card-border: 1px solid var(--color-border-default);
  --card-radius: var(--radius-md);
  --card-shadow: var(--shadow-card);
  --card-padding: var(--space-lg);
  --card-hover-shadow: 0 4px 16px rgba(26, 46, 74, 0.13);
  --card-transition: box-shadow 0.25s ease, transform 0.25s ease;

  /* ─── Grid ────────────────────────────────────────── */
  --container-max: 1440px;
  --container-padding: 0 24px;
  --grid-gutter: 24px;

  /* ─── Sections ────────────────────────────────────── */
  --section-padding-y: 80px;
  --section-padding-y-mobile: 48px;

  /* ─── Process Step Icon ───────────────────────────── */
  --step-icon-size: 56px;
  --step-icon-bg: var(--color-primary-light);
  --step-icon-color: var(--color-primary);

  /* ─── Table ───────────────────────────────────────── */
  --table-header-bg: var(--color-secondary);
  --table-header-color: var(--color-text-on-dark);
  --table-accent-bg: var(--color-primary);
  --table-accent-color: var(--color-text-on-dark);
  --table-row-alt-bg: var(--color-bg-light);
  --table-border: var(--color-border-default);
  --table-check-color: var(--color-primary);
  --table-cross-color: #cbd5e0;

  /* ─── Transitions (shared) ────────────────────────── */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
}

/*
 * ─── Elementor Safety Scope ───────────────────────────
 * All rules below are scoped to .page-homepage and
 * .page-private-scans so they cannot leak into the
 * surrounding WordPress / Elementor page when loaded
 * via CDN.
 *
 * CSS custom properties stay on :root (above) so tokens
 * remain available to any element that needs them.
 */

/* ─── Browser Default Reset (safe global) ───────────── */
/* Only removes the 8px browser-default margin/padding on
   html and body. Does not touch any Elementor styles. */
html,
body {
  margin: 0;
  padding: 0;
}

/* ─── Scoped Box-Sizing Reset ────────────────────────── */
.page-homepage *,
.page-homepage *::before,
.page-homepage *::after,
.page-private-scans *,
.page-private-scans *::before,
.page-private-scans *::after,
.page-subservice *,
.page-subservice *::before,
.page-subservice *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Base Typography (replaces body rule) ───────────── */
.page-homepage,
.page-private-scans,
.page-subservice {
  font-family: var(--font-base);
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-height);
  color: var(--color-text-body);
  background: var(--color-bg-white);
  -webkit-font-smoothing: antialiased;
}

/* ─── Container ──────────────────────────────────────── */
.page-homepage .container,
.page-private-scans .container,
.page-subservice .container {
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  padding: var(--container-padding);
}

/* ─── Section Wrapper ────────────────────────────────── */
.page-homepage .section,
.page-private-scans .section,
.page-subservice .section {
  padding: var(--section-padding-y) 0;
}

.page-homepage .section--white,
.page-private-scans .section--white,
.page-subservice .section--white {
  background: var(--color-bg-white);
}
.page-homepage .section--light,
.page-private-scans .section--light,
.page-subservice .section--light {
  background: var(--color-bg-light);
}
.page-homepage .section--dark,
.page-private-scans .section--dark,
.page-subservice .section--dark {
  background: var(--color-bg-dark);
}

/* ─── Subservice hero tint ──────────────────────────────── */
/* Applied to S1 on all subservice pages. Uses primary-light
   (#fef0ea) as a consistent brand entry point. */
.page-subservice .section--hero {
  background: var(--color-primary-light);
}

/* ─── Section Heading ────────────────────────────────── */
.page-homepage .section-label,
.page-private-scans .section-label,
.page-subservice .section-label {
  display: block;
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  letter-spacing: var(--text-label-spacing);
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-sm);
}

.page-homepage .section-title,
.page-private-scans .section-title,
.page-subservice .section-title {
  font-family: var(--font-heading);
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-height);
  letter-spacing: var(--text-h2-spacing);
  color: var(--color-text-heading);
  margin-bottom: var(--space-md);
}

.page-homepage .section-title--center,
.page-private-scans .section-title--center,
.page-subservice .section-title--center {
  text-align: center;
}

.page-homepage .section-body,
.page-private-scans .section-body,
.page-subservice .section-body {
  font-size: var(--text-body-md-size);
  line-height: var(--text-body-md-height);
  color: var(--color-text-muted);
  max-width: 640px;
}

.page-homepage .section-body--center,
.page-private-scans .section-body--center,
.page-subservice .section-body--center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* ─── Buttons ────────────────────────────────────────── */
.page-homepage .btn,
.page-private-scans .btn,
.page-subservice .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--btn-padding-y) var(--btn-padding-x);
  font-family: var(--font-base);
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  border-radius: var(--btn-radius);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  transition: var(--btn-transition);
  white-space: nowrap;
}

.page-homepage .btn--lg,
.page-private-scans .btn--lg,
.page-subservice .btn--lg {
  padding: 14px 32px;
  font-size: var(--btn-font-size);
}

.page-homepage .btn--primary,
.page-private-scans .btn--primary,
.page-subservice .btn--primary {
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  border-color: var(--color-primary);
}
.page-homepage .btn--primary:hover,
.page-private-scans .btn--primary:hover,
.page-subservice .btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: var(--shadow-md);
}

.page-homepage .btn--secondary,
.page-private-scans .btn--secondary,
.page-subservice .btn--secondary {
  background: var(--color-secondary);
  color: var(--color-text-on-dark);
  border-color: var(--color-secondary);
}
.page-homepage .btn--secondary:hover,
.page-private-scans .btn--secondary:hover,
.page-subservice .btn--secondary:hover {
  background: var(--color-secondary-hover);
  border-color: var(--color-secondary-hover);
}

.page-homepage .btn--outline,
.page-private-scans .btn--outline,
.page-subservice .btn--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.page-homepage .btn--outline:hover,
.page-private-scans .btn--outline:hover,
.page-subservice .btn--outline:hover {
  background: var(--color-primary-light);
}

.page-homepage .btn--outline-dark,
.page-private-scans .btn--outline-dark,
.page-subservice .btn--outline-dark {
  background: transparent;
  color: var(--color-text-on-dark);
  border-color: var(--color-text-on-dark);
}
.page-homepage .btn--outline-dark:hover,
.page-private-scans .btn--outline-dark:hover,
.page-subservice .btn--outline-dark:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ─── Card ───────────────────────────────────────────── */
.page-homepage .card,
.page-private-scans .card,
.page-subservice .card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-padding);
  transition: var(--card-transition);
}
.page-homepage .card:hover,
.page-private-scans .card:hover,
.page-subservice .card:hover {
  box-shadow: var(--card-hover-shadow);
  transform: translateY(-2px);
}

/* ─── Grid Utilities ─────────────────────────────────── */
.page-homepage .grid-3,
.page-private-scans .grid-3,
.page-subservice .grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gutter);
}

.page-homepage .grid-2,
.page-private-scans .grid-2,
.page-subservice .grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--grid-gutter);
}

@media (max-width: 992px) {
  .page-homepage .grid-3,
  .page-private-scans .grid-3,
  .page-subservice .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .page-homepage .grid-3,
  .page-homepage .grid-2,
  .page-private-scans .grid-3,
  .page-private-scans .grid-2,
  .page-subservice .grid-3,
  .page-subservice .grid-2 {
    grid-template-columns: 1fr;
  }

  .page-homepage .section,
  .page-private-scans .section,
  .page-subservice .section {
    padding: var(--section-padding-y-mobile) 0;
  }

  .page-homepage .section-title,
  .page-private-scans .section-title,
  .page-subservice .section-title {
    font-size: 24px;
  }

  .page-homepage .section-body,
  .page-private-scans .section-body,
  .page-subservice .section-body {
    font-size: 16px;
  }
}