/* ==========================================================================
   Design tokens — Coastal Performance Chiropractic

   Every value here was read off the WordPress site's stylesheet (The7 theme
   + Elementor global settings) or measured on it, so the rebuild matches
   the original rather than approximating it. site.css refers to these by
   name and contains no raw colours.
   ========================================================================== */

:root {
  /* --- Colour ------------------------------------------------------------ */

  /* The7 "accent": icon circles, check marks, the service-page button. */
  --color-teal: #39998e;
  --color-teal-hover: #4fb77f;

  /* Elementor "primary": the map pin, the FAQ answers, several headings. */
  --color-cyan: #05abc4;
  /* Hero buttons rest on this and brighten to --color-cyan on hover. */
  --color-cyan-deep: #0ba4a5;

  /* Elementor "secondary": navy headings, FAQ questions, Schedule buttons. */
  --color-navy: #003566;

  /* The hero headline. */
  --color-gold: #ffdc7c;

  /* Links inside body copy (The7 "content links"). */
  --color-link: #62d195;

  --color-ink: #333333;          /* The7 title colour */
  --color-ink-strong: #000000;
  --color-text: #7a7a7a;         /* The7 base text colour */
  --color-text-muted: #999999;
  --color-white: #ffffff;
  --color-white-75: rgba(255, 255, 255, 0.75);

  --color-bg: #ffffff;
  --color-bg-boxes: rgba(0, 0, 0, 0.04);   /* "content boxes" background */
  --color-bg-grey: rgba(0, 0, 0, 0.1);     /* "dividers" colour, used as a section fill */
  --color-bg-title-bar: #f7f7f7;
  --color-rule: rgba(0, 0, 0, 0.08);
  --color-rule-strong: #e6e6e6;
  --color-header-rule: rgba(51, 51, 51, 0.11);

  --color-footer-bg: #1a1c20;
  --color-footer-text: #8a8f95;
  --color-footer-heading: #ffffff;
  --color-footer-social-bg: rgba(255, 255, 255, 0.08);

  --shadow-card: 0 0 30px 0 rgba(0, 0, 0, 0.12);
  --shadow-header: 0 2px 12px rgba(0, 0, 0, 0.08);
  --hero-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.75) 0, rgba(0, 0, 0, 0.5) 33%);
  --band-overlay: rgba(0, 0, 0, 0.5);

  /* --- Type -------------------------------------------------------------- */

  /* Both are Google fonts the old site loaded from Google; here they are
     self-hosted variable fonts, one file each, so no third-party request. */
  --font-heading: "Assistant", Helvetica, Arial, Verdana, sans-serif;
  --font-body: "Open Sans", Helvetica, Arial, Verdana, sans-serif;

  --text-base: 14px;      /* The7 base font size */
  --text-big: 16px;       /* The7 "big" text: the about page, posts */
  --text-small: 13px;
  --text-tiny: 11px;
  --text-nav: 16px;
  --text-address: 20px;
  --text-h1: 52px;
  --text-h2: 38px;
  --text-h3: 24px;
  --text-h4: 18px;
  --text-faq-title: 45px;
  --text-faq-sub: 21px;
  --text-band-title: 48px;
  --text-band-sub: 24px;

  --leading-tight: 1.1;
  --leading-heading: 1.2;
  --leading-base: 1.4;
  --leading-big: 1.6;
  --leading-post: 1.7;
  --leading-faq: 1.8;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-light: 300;

  /* --- Layout ------------------------------------------------------------ */

  --container: 1190px;
  --container-narrow: 900px;
  --gutter: 4%;
  --header-height: 90px;
  --header-height-mobile: 70px;
  --section-pad: 60px;
  --nav-gap: 40px;

  --radius: 0;             /* The7 base border radius: none */
  --radius-round: 50%;
  --transition: 0.3s;
}

@media (max-width: 1024px) {
  :root {
    --text-h1: 48px;
    --text-h2: 32px;
    --text-band-title: 40px;
  }
}

@media (max-width: 767px) {
  :root {
    --text-h1: 36px;
    --text-h2: 28px;
    --text-h3: 22px;
    --text-faq-title: 36px;
    --text-band-title: 34px;
    --text-band-sub: 20px;
    --section-pad: 40px;
  }
}