/* ============================================================
   Pro Service Pumps — Design Tokens
   Used by every page, slide, UI kit. Import via:
     <link rel="stylesheet" href="/colors_and_type.css">
   ============================================================ */

/* ---------- Fonts ---------- */
/* Manrope is the closest open-source match to the geometric-humanist
   feel of the PS PUMPS wordmark (rounded apertures, even stroke).
   Inter is an acceptable fallback. See README "Note on Font Substitutes". */
@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

:root {
    /* ============================================================
       COLOR — Brand & Accent
       PS Cyan is the system's lone signal: primary CTA, link color,
       active states, and the connector dots in the logo mark. Reserved.
       ============================================================ */
    --ps-cyan: #25aae1;          /* the brand. Sampled directly from logo. */
    --ps-cyan-bright: #4dc1ed;   /* slightly lighter, for hover lift on cyan elements */
    --ps-cyan-deep:   #0f7aae;   /* pressed state, visited-link */
    --ps-cyan-soft:   #d4eef9;   /* pale wash, used for selection chips, info bands */
    --ps-cyan-tint:   #ebf7fc;   /* lightest wash, for highlighted feature panels */

    /* ---------- Surface ---------- */
    --canvas:   #ffffff;          /* universal page background */
    --paper:    #ffffff;          /* card surface — lift via shadow, not tint */
    --cloud:    #f5f7f8;          /* lightest band — alternating section rhythm */
    --fog:      #e7ecef;          /* slightly cooler-gray section band */
    --steel:    #c4cdd1;          /* hairline borders on emphasized outlines */
    --hairline: #e7ecef;          /* default 1px divider color */

    /* ---------- Ink (text + dark slabs) ---------- */
    --ink:       #0a0a0a;         /* universal text on white; also dark-slab background */
    --ink-soft:  #1a1a1a;         /* subtle textural shift inside dark slabs */
    --ink-deep:  #000000;         /* wordmark and absolute hairlines */
    --on-ink:    #ffffff;         /* text on dark-navy slabs */
    --charcoal:  #3a3f42;         /* muted body — secondary copy, fine print */
    --graphite:  #6b7378;         /* small-print color — legal, timestamps */

    /* ---------- Semantic ---------- */
    --success:   #2f8f4e;         /* "Booked", "Online" status — pumps running */
    --success-soft: #e3f4e8;
    --warning:   #c98a0b;         /* "Service due", attention banners */
    --warning-soft: #fcf2dc;
    --danger:    #c0392b;         /* "Fault", "Offline" status */
    --danger-soft: #fadedb;
    --info: var(--ps-cyan);

    /* ---------- Photography accent (rare) ---------- */
    --rain-deep:  #0e2a35;        /* deep tea-blue used on the "rainwater" service tile */
    --earth-clay: #b56a3f;        /* warm copper accent for "bore/submersible" — reserved */

    /* ============================================================
       TYPE — sizes follow a perfect-fourth-ish progression.
       Display weight stays at 700 (Manrope's most confident voice)
       — friendly but committed. Body at 400/500. Buttons at 600 with
       tracking, only place the system tracks letters.
       ============================================================ */
    --font-display: "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-body:    "Manrope", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

    /* Display scale */
    --fs-display-xxl: 72px;   --lh-display-xxl: 1.04;
    --fs-display-xl:  56px;   --lh-display-xl:  1.05;
    --fs-display-lg:  44px;   --lh-display-lg:  1.08;
    --fs-display-md:  32px;   --lh-display-md:  1.15;
    --fs-display-sm:  24px;   --lh-display-sm:  1.2;
    --fs-display-xs:  20px;   --lh-display-xs:  1.25;

    /* Body scale */
    --fs-body-lg: 18px;       --lh-body-lg: 1.55;
    --fs-body-md: 16px;       --lh-body-md: 1.55;
    --fs-body-sm: 14px;       --lh-body-sm: 1.5;
    --fs-caption: 13px;       --lh-caption: 1.45;
    --fs-micro:   12px;       --lh-micro:   1.4;

    /* Button typography */
    --fs-btn:     14px;
    --tracking-btn: 0.08em;     /* uppercase tracking, the only place we track */
    --tracking-eyebrow: 0.14em; /* uppercase eyebrows above headlines */

    /* Font weights */
    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold: 600;
    --fw-bold:    700;
    --fw-heavy:   800;

    /* ============================================================
       SPACING — 8px base, half step 4px. Section rhythm is 96px desktop.
       ============================================================ */
    --s-xxs: 4px;
    --s-xs:  8px;
    --s-sm:  12px;
    --s-md:  16px;
    --s-lg:  20px;
    --s-xl:  24px;
    --s-2xl: 32px;
    --s-3xl: 48px;
    --s-4xl: 64px;
    --s-section: 96px;
    --container: 1280px;

    /* ============================================================
       RADIUS — two-tier system:
       Buttons and inputs stay tight (6px). Cards and photo frames
       breathe at 16px. Pill for chips.
       ============================================================ */
    --r-none: 0;
    --r-xs:   2px;
    --r-sm:   4px;
    --r-md:   6px;     /* default buttons + inputs */
    --r-lg:   10px;    /* badges, small icon cards */
    --r-xl:   16px;    /* cards, photo frames, pricing tiles */
    --r-2xl:  24px;    /* hero photo containers */
    --r-pill: 999px;   /* chips, sub-nav tabs, search field */

    /* ============================================================
       ELEVATION
       The system is mostly flat. Depth = surface-color contrast.
       Soft-Lift is the workhorse: every product/service card.
       ============================================================ */
    --shadow-hairline: 0 0 0 1px var(--hairline);
    --shadow-soft:     0 2px 8px rgba(10, 10, 10, 0.06), 0 1px 2px rgba(10, 10, 10, 0.04);
    --shadow-lift:     0 6px 18px rgba(10, 10, 10, 0.10), 0 2px 4px rgba(10, 10, 10, 0.05);
    --shadow-modal:    0 12px 32px rgba(10, 10, 10, 0.16);
    --shadow-press:    inset 0 2px 4px rgba(0, 0, 0, 0.12);

    /* Focus ring — cyan halo on any focusable */
    --focus-ring: 0 0 0 3px rgba(37, 170, 225, 0.35);

    /* Motion */
    --ease-out: cubic-bezier(.2, .8, .2, 1);
    --ease-in-out: cubic-bezier(.65, 0, .35, 1);
    --dur-fast: 120ms;
    --dur-base: 200ms;
    --dur-slow: 320ms;
}

/* ============================================================
   SEMANTIC RESETS — readable defaults so a bare HTML file looks
   on-brand without per-page styling.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
    font-family: var(--font-body);
    color: var(--ink);
    background: var(--canvas);
    font-size: var(--fs-body-md);
    line-height: var(--lh-body-md);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.01em;
    text-wrap: balance;
    font-weight: var(--fw-bold);
}

h1 { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: -0.02em; }
h2 { font-size: var(--fs-display-lg); line-height: var(--lh-display-lg); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-display-md); line-height: var(--lh-display-md); }
h4 { font-size: var(--fs-display-sm); line-height: var(--lh-display-sm); font-weight: var(--fw-semibold); }
h5 { font-size: var(--fs-display-xs); line-height: var(--lh-display-xs); font-weight: var(--fw-semibold); }

p { margin: 0; text-wrap: pretty; }

a {
    color: var(--ps-cyan-deep);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--ps-cyan); }
a:visited { color: var(--ps-cyan-deep); }

/* Eyebrow utility — small uppercase label above a headline */
.eyebrow {
    font-size: var(--fs-caption);
    font-weight: var(--fw-bold);
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ps-cyan-deep);
}

/* Generic container */
.container {
    width: 100%;
    max-width: var(--container);
    margin: 0 auto;
    padding-left: var(--s-2xl);
    padding-right: var(--s-2xl);
}
@media (max-width: 720px) {
    .container { padding-left: var(--s-md); padding-right: var(--s-md); }
}

/* Focus visible */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-md); }