/* =====================================================================
 * HydroPoint 2026 — Colors & Type
 * Source of truth: HP_StyleGuide_2026_v4.pdf
 * ===================================================================== */

/* ---------- Web fonts ---------- */
@font-face {
  font-family: "Work Sans";
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/WorkSans-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Work Sans";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/WorkSans-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Work Sans";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/WorkSans-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Work Sans";
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url("../fonts/WorkSans-Bold.ttf") format("truetype");
}

:root {
  /* ---------------------------------------------------------------
   * 1. BRAND COLORS — predominant, hero-level use
   * --------------------------------------------------------------- */
  --hp-blue:        #3599cb;  /* Hero. Primary brand. PMS 7688 C */
  --hp-cadet:       #006fa9;  /* Mid-tone, links/body emphasis    */
  --hp-navy:        #152e54;  /* Body copy on light bg; hero #2   */
  --hp-ink-blue:    #0c1625;  /* Near-black for serious surfaces  */
  --hp-polar:       #4dc9f5;  /* Accent / data viz                */
  --hp-ice-blue:    #bfe6f1;  /* Tint / surface                   */
  --hp-logo-black:  #282523;  /* Logo black. PMS 426 C            */

  /* ---------------------------------------------------------------
   * 2. UTILITY — back-end UI + iconography only.
   *    DO NOT use as forward-facing brand color.
   * --------------------------------------------------------------- */
  --util-red:       #d9442c;  /* Warning  */
  --util-yellow:    #febf52;  /* Caution  */
  --util-green:     #5ea845;  /* Success  */
  --util-grey-900:  #333333;
  --util-grey-700:  #152e54;  /* Style guide reuses Navy here     */
  --util-grey-100:  #edf0f1;

  /* ---------------------------------------------------------------
   * 3. GRADIENTS — two only.
   * --------------------------------------------------------------- */
  --grad-hp-blue:   linear-gradient(135deg, #54a4db 0%, #006fa9 100%);
  --grad-navy:      linear-gradient(135deg, #006fa9 0%, #152e54 100%);

  /* ---------------------------------------------------------------
   * 4. SEMANTIC TOKENS
   * --------------------------------------------------------------- */
  --color-bg:           #ffffff;
  --color-bg-alt:       #edf0f1;        /* light grey panels       */
  --color-bg-ice:       #bfe6f1;        /* tinted callout          */
  --color-bg-brand:     #3599cb;        /* hero blocks             */
  --color-bg-navy:      #152e54;        /* dark hero               */
  --color-bg-ink:       #0c1625;        /* deepest dark            */

  --color-fg:           #152e54;        /* default body = Navy     */
  --color-fg-muted:     #6b7a8f;        /* derived from Navy @ 60% */
  --color-fg-on-dark:   #ffffff;
  --color-fg-on-brand:  #ffffff;
  --color-fg-link:      #006fa9;        /* Cadet. Bold underline   */
  --color-fg-link-hover:#152e54;        /* Navy on hover           */
  --color-fg-heading:   #3599cb;        /* H1 preferred = HP Blue  */

  --color-border:       #d6dde4;
  --color-border-strong:#152e54;

  /* ---------------------------------------------------------------
   * 5. TYPOGRAPHY
   *    Family: Work Sans (the ONLY typeface).
   * --------------------------------------------------------------- */
  --font-sans: "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* Web type scale (per style guide §5.1) */
  --fs-h1:  60px;   --lh-h1: 1.1;   --fw-h1: var(--fw-bold);     /* HP Blue */
  --fs-h2:  40px;   --lh-h2: 1.15;  --fw-h2: var(--fw-semibold); /* Navy    */
  --fs-h3:  32px;   --lh-h3: 1.2;   --fw-h3: var(--fw-semibold); /* Navy    */
  --fs-h4:  20px;   --lh-h4: 1.35;  --fw-h4: var(--fw-regular);  /* Ink     */
  --fs-body:16px;   --lh-body:1.5;
  --fs-sm:  14px;   --lh-sm:  1.45;
  --fs-xs:  12px;   --lh-xs:  1.4;

  /* Display scale for slide / hero use (§3.1 print) */
  --fs-display:   88px;  --lh-display: 1.05;
  --fs-eyebrow:   14px;  --tracking-eyebrow: 0.14em; /* All-caps subtitle */

  /* ---------------------------------------------------------------
   * 6. SHAPE
   *    "Corners are sharp. Rounded corners indicate an actionable
   *    item." — Style Guide §6.1
   * --------------------------------------------------------------- */
  --radius-0:   0px;       /* default for cards, blocks, photos    */
  --radius-sm:  4px;
  --radius-md:  8px;       /* buttons, inputs, chips               */
  --radius-lg:  999px;     /* pill (rare)                          */

  /* ---------------------------------------------------------------
   * 7. SPACING — 4 pt grid
   * --------------------------------------------------------------- */
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10:128px;

  /* ---------------------------------------------------------------
   * 8. ELEVATION — used sparingly. Brand is flat + crisp.
   * --------------------------------------------------------------- */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(12, 22, 37, 0.06),
              0 1px 1px rgba(12, 22, 37, 0.04);
  --shadow-2: 0 4px 10px rgba(12, 22, 37, 0.08),
              0 2px 4px rgba(12, 22, 37, 0.05);
  --shadow-3: 0 12px 28px rgba(12, 22, 37, 0.14),
              0 6px 10px rgba(12, 22, 37, 0.08);

  /* ---------------------------------------------------------------
   * 9. MOTION — restrained.
   * --------------------------------------------------------------- */
  --ease-standard: cubic-bezier(.2,.7,.2,1);
  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   360ms;
}

/* ============================================================
 * SEMANTIC ELEMENT STYLES
 * ============================================================ */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-h1);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  color: var(--color-fg-heading);
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-5);
}
h2, .h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-h2);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  color: var(--hp-navy);
  margin: 0 0 var(--s-4);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-h3);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  color: var(--hp-navy);
  margin: 0 0 var(--s-3);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-h4);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  color: var(--hp-ink-blue);
  margin: 0 0 var(--s-3);
}
p { margin: 0 0 var(--s-4); }

/* Eyebrow / subtitle pattern: ALL CAPS, tracked */
.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--hp-cadet);
}

/* Links — bold + colored + underline grows on hover (per §5.3) */
a, .link {
  color: var(--color-fg-link);
  font-weight: var(--fw-bold);
  text-decoration: none;
  position: relative;
  display: inline-block;
}
a:hover, .link:hover {
  color: var(--color-fg-link-hover);
}
a::after, .link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  height: 2px;
  width: 0;
  background: currentColor;
  transition: width var(--dur-base) var(--ease-standard);
}
a:hover::after, .link:hover::after {
  width: 50%;
  max-width: 80px;
}

/* Buttons — rounded corners (the only place rounding is allowed) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  letter-spacing: 0.02em;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.btn::after { content: none; } /* override link underline */

.btn-primary {
  background: var(--hp-navy);
  color: var(--color-fg-on-brand);
}
.btn-primary:hover { background: var(--hp-ink-blue); }

.btn-brand {
  background: var(--hp-blue);
  color: #fff;
}
.btn-brand:hover { background: var(--hp-cadet); }

.btn-outline {
  background: transparent;
  color: var(--hp-navy);
  border-color: var(--hp-navy);
}
.btn-outline:hover {
  background: var(--hp-navy);
  color: #fff;
}

.btn-on-dark {
  background: #fff;
  color: var(--hp-navy);
}
.btn-on-dark:hover { background: var(--hp-ice-blue); }

/* Card — flat by default; sharp corners */
.card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-0);
  padding: var(--s-6);
}
.card-elevated {
  border: none;
  box-shadow: var(--shadow-2);
}

/* Form inputs — sharp corners, navy focus ring */
.input {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--hp-navy);
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  width: 100%;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
.input:focus {
  outline: none;
  border-color: var(--hp-cadet);
  box-shadow: 0 0 0 3px rgba(0, 111, 169, 0.18);
}

/* Selection */
::selection { background: var(--hp-polar); color: var(--hp-ink-blue); }