/* ==========================================================================
   DozeHost — Design Tokens
   Typography/color/spacing extracted from world.siteground.com computed styles.
   Fonts: Poppins (headings, UI, buttons) + Inter (body copy)
   ========================================================================== */

:root {
  /* ---- Font families ---- */
  --font-heading: "Poppins", Arial, Helvetica, sans-serif;
  --font-body: "Inter", Arial, Helvetica, sans-serif;

  /* ---- Title scale (Poppins 500) ---- */
  --title-7xl-size: 56px;  --title-7xl-lh: 72px;
  --title-6xl-size: 48px;  --title-6xl-lh: 64px;
  --title-5xl-size: 40px;  --title-5xl-lh: 56px;
  --title-4xl-size: 32px;  --title-4xl-lh: 48px;
  --title-3xl-size: 26px;  --title-3xl-lh: 38px;
  --title-2xl-size: 22px;  --title-2xl-lh: 32px;
  --title-xl-size:  20px;  --title-xl-lh:  30px;
  --title-l-size:   18px;  --title-l-lh:   28px;

  /* ---- Text scale ---- */
  --text-l-size:   16px; --text-l-lh:  24px;  /* Inter 400 — body */
  --text-m-size:   16px; --text-m-lh:  24px;  /* Poppins 500 — UI */
  --text-2xs-size: 14px; --text-2xs-lh: 22px; /* Poppins 600 — labels/buttons */
  --text-3xs-size: 12px; --text-3xs-lh: 18px; /* Inter 600 — micro */

  /* ---- Weights ---- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* ---- Color ---- */
  --c-black: #000000;
  --c-dark: #111111;
  --c-ink: #212121;          /* primary text */
  --c-gray: #8c8c8c;         /* muted text */
  --c-gray-light: #cccccc;
  --c-white: #ffffff;
  /* Accent matches the logo, which is pure black — so the UI is monochrome.
     To reintroduce a brand colour later, only this block needs to change. */
  --c-accent: #111111;            /* logo black */
  --c-accent-hover: #000000;      /* button hover */
  --c-accent-strong: #111111;     /* accent text on a tint surface */
  --c-on-accent: #ffffff;         /* text on a filled accent button */
  --c-accent-tint: #f0f1f2;       /* neutral tint surface */
  --c-accent-soft: rgba(0, 0, 0, 0.06);  /* icon tiles, glows */
  --c-surface: #f5f6f7;           /* light neutral — footer, alternating sections */

  /* Hero surface — soft gradient with color. */
  --hero-bg-from: #eef2ff;
  --hero-bg-to: #f5f0ff;
  --hero-glow: rgba(99, 102, 241, 0.08);

  --c-border: rgba(0, 0, 0, 0.05);
  --c-border-strong: rgba(0, 0, 0, 0.15);
  --c-surface-subtle: rgba(0, 0, 0, 0.05);

  /* ---- Radius ---- */
  --radius-xs: 4px;
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-l: 16px;
  --radius-xl: 24px;
  --radius-pill: 360px;

  /* ---- Spacing ---- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 40px;  --sp-8: 48px;
  --sp-9: 64px;  --sp-10: 80px; --sp-11: 96px; --sp-12: 120px;

  /* ---- Layout ---- */
  --container: 1185px;
  --container-pad: 24px;
  --header-h: 72px;   /* matches SiteGround's 72px header */
  /* How far right-anchored nav panels extend past the nav, so they line up with
     the header buttons instead of the nav item. Equals the width of
     .header__actions (194px) + the .header__inner flex gap (--sp-6, 32px).
     Re-measure if the Login / Get started buttons change. */
  --nav-panel-shift: 226px;
  /* Gap between a nav item's bottom and its panel. The item is only 38px tall
     inside a 72px header, so its bottom edge sits ~17px *above* the header
     bottom — without this the panel would overlap the header. 17px clears the
     header, the rest is breathing room. */
  --nav-panel-drop: 30px;

  /* ---- Section rhythm ---- */
  --section-pad-y: 96px;
  --section-pad-y-sm: 64px;
  --section-pad-y-lg: 136px;

  /* ---- Elevation ---- */
  --shadow-s: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-m: 0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-l: 0 12px 40px rgba(0, 0, 0, 0.12);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 220ms;
}

@media (max-width: 900px) {
  :root {
    --title-7xl-size: 40px; --title-7xl-lh: 52px;
    --title-6xl-size: 34px; --title-6xl-lh: 44px;
    --title-5xl-size: 30px; --title-5xl-lh: 40px;
    --title-4xl-size: 26px; --title-4xl-lh: 36px;
    --section-pad-y: 64px;
    --section-pad-y-sm: 48px;
    --section-pad-y-lg: 88px;
    --header-h: 64px;
  }
}