/* ============================================================
   DESIGN TOKENS
   ------------------------------------------------------------
   The single source of truth for every reusable value in the
   site. Loaded before every other stylesheet.

   Rule: components and pages reference these variables rather
   than hardcoding values. If you need a new colour, shadow, or
   spacing step, add it here first.

   Contents
     1. Colour
     2. Typography
     3. Spacing scale
     4. Section rhythm
     5. Layout / containers
     6. Radius
     7. Shadows
     8. Buttons
     9. Motion
    10. Layers (z-index)
   ============================================================ */

:root {
  /* --------------------------------------------------------
     1. COLOUR
     -------------------------------------------------------- */

  /* Brand */
  --teal: #4bb0b5;
  --teal-dark: #2e969f;
  --mint: #73d4bc;
  --aqua: #55beb9;
  --brand-gradient: linear-gradient(180deg, #4db0b5 0%, #74d7bf 100%);

  /* Text */
  --ink: #4e555a;
  --ink-strong: #56595e;
  --ink-heading: #545c61;
  --body: #728187;
  --muted: #84949b;

  /* Surfaces */
  --surface: #ffffff;
  --soft: #f4f8f9;
  --soft-2: #eef5f6;
  --line: #dce9e8;
  --hairline: #e2edec;

  /* Dark sections */
  --dark: #2d565b;
  --dark-deep: #22454a;
  --on-dark: rgba(255, 255, 255, 0.74);
  --on-brand: rgba(255, 255, 255, 0.9);

  /* Accents on dark/brand grounds */
  --accent-light: #a9ebdb;

  /* --------------------------------------------------------
     2. TYPOGRAPHY
     -------------------------------------------------------- */

  --font-sans: "Montserrat", sans-serif;

  /* Display + heading scale */
  --fs-h1: clamp(38px, 4.4vw, 68px);
  --fs-h2: clamp(30px, 3.2vw, 46px);
  --fs-h3: 17px;
  --fs-lede: clamp(16px, 1.1vw, 18px);
  --fs-body: 15px;
  --fs-sm: 13px;
  --fs-xs: 12px;

  --fw-regular: 500;
  --fw-medium: 600;
  --fw-semibold: 700;
  --fw-bold: 800;
  --fw-display: 750;

  --lh-tight: 0.98;
  --lh-heading: 1.04;
  --lh-body: 1.7;

  --tracking-display: -0.035em;
  --tracking-heading: -0.02em;
  --tracking-kicker: 0.12em;

  /* Reading measures */
  --measure-lede: 40ch;
  --measure-body: 46ch;
  --measure-tight: 34ch;

  /* --------------------------------------------------------
     3. SPACING SCALE
     -------------------------------------------------------- */

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

  /* --------------------------------------------------------
     4. SECTION RHYTHM
     Sections pick a step by intent so pages have a cadence
     rather than one repeated gap.
     -------------------------------------------------------- */

  --section-xl: clamp(104px, 11vw, 168px);
  --section-lg: clamp(84px, 8.5vw, 128px);
  --section-md: clamp(64px, 6.5vw, 96px);
  --section-sm: clamp(40px, 4.5vw, 64px);
  --section-gap: clamp(40px, 5vw, 84px);

  /* --------------------------------------------------------
     5. LAYOUT / CONTAINERS
     -------------------------------------------------------- */

  --container: 1180px;
  --container-wide: 1320px;
  --container-narrow: 780px;
  --container-gutter: 48px;
  --container-gutter-mobile: 40px;

  --navbar-height: 58px;

  /* --------------------------------------------------------
     6. RADIUS
     -------------------------------------------------------- */

  --radius-sm: 5px;
  --radius-md: 7px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* --------------------------------------------------------
     7. SHADOWS
     -------------------------------------------------------- */

  --shadow: 0 18px 44px rgba(32, 83, 87, 0.18);
  --card-shadow: 0 12px 28px rgba(61, 93, 101, 0.08);
  --shadow-hover: 0 18px 34px rgba(61, 93, 101, 0.13);
  --shadow-image: 0 30px 60px -12px rgba(32, 83, 87, 0.3), 0 8px 20px -6px rgba(32, 83, 87, 0.16);
  --shadow-overlay: 0 24px 60px rgba(32, 83, 87, 0.22);

  /* --------------------------------------------------------
     8. BUTTONS
     -------------------------------------------------------- */

  --btn-height: 45px;
  --btn-padding: 15px 22px;
  --btn-radius: 6px;
  --btn-fs: 15px;
  --btn-fw: 550;

  /* Minimum comfortable touch target (WCAG 2.5.5). */
  --tap-target: 44px;

  /* --------------------------------------------------------
     9. MOTION
     -------------------------------------------------------- */

  --duration-fast: 180ms;
  --duration-normal: 260ms;
  --duration-slow: 400ms;
  --duration-float: 7s;

  --ease: ease;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-float: cubic-bezier(0.45, 0, 0.25, 1);

  --transition-fast: var(--duration-fast) var(--ease);
  --transition-normal: var(--duration-normal) var(--ease);

  /* --------------------------------------------------------
     10. LAYERS
     One place to reason about stacking, so the mobile menu
     and its overlay can never be trapped behind content.
     -------------------------------------------------------- */

  --z-base: 1;
  --z-sticky: 10;
  --z-overlay: 900;
  --z-menu: 1000;
  /* Navbar sits above the mobile panel so the hamburger/close button and
     logo stay visible while the menu is open. */
  --z-navbar: 1010;
}