/* ============================================================
   RJ Sam's Heating & Cooling — design tokens
   The single source of truth for color, shape, space, and type.
   Everything visual flows from these custom properties.
   ============================================================ */

/* ------------------------- Scaling System by Osmo [https://osmo.supply/] -------------------------  */

/* Desktop */
:root {
  --size-unit: 16; /* body font-size in design - no px */
  --size-container-ideal: 1440; /* screen-size in design - no px */
  --size-container-min: 992px;
  --size-container-max: 1920px;
  --size-container: clamp(var(--size-container-min), 100vw, var(--size-container-max));
  --size-font: calc(var(--size-container) / (var(--size-container-ideal) / var(--size-unit)));
}

/* Tablet */
@media screen and (max-width: 991px) {
  :root {
    --size-container-ideal: 834; /* screen-size in design - no px */
    --size-container-min: 768px;
    --size-container-max: 991px;
  }
}

/* Mobile Landscape */
@media screen and (max-width: 767px) {
  :root {
    --size-container-ideal: 550; /* screen-size in design - no px */
    --size-container-min: 480px;
    --size-container-max: 767px;
  }
}

/* Mobile Portrait */
@media screen and (max-width: 479px) {
  :root {
    --size-container-ideal: 390; /* screen-size in design - no px */
    --size-container-min: 320px;
    --size-container-max: 479px;
  }
}

[data-theme="rj-sams"] {
  /* --- Core palette --- */
  --color-orange: #f26a21; /* primary CTA, active states, vent icon at rest */
  --color-navy: #0f204d; /* header, footer, dark panels, primary text */
  --color-cream: #f7f2e8; /* main page field */
  --color-blue: #2777c7; /* links, cooling/tech states, focus ring */
  --color-gray: #6b7177; /* metadata, borders — large/nonessential text only on cream */
  --color-white: #ffffff;

  /* --- Tints & supporting --- */
  --color-cream-light: #fcfaf5;
  --color-orange-tint: #fce5d8;
  --color-blue-tint: #e8eef9;
  --color-green-tint: #eaf8e7; /* air-quality pages' hero field */
  --color-navy-tint: #e2e6ef;
  --color-gray-tint: #ececea;
  --color-ink: #17213a; /* long-form body */
  --color-success: #e4eee9;
  --color-warning: #fff1d7;

  /* --- Gradient waypoints --- */
  --color-hero-mid: #fff8ed;
  --color-tech-deep: #a9c4e7;
  --color-financing-mid: #16305f;

  /* --- Interaction shades (derived, hover/active only) --- */
  --color-orange-hover: #e05e17;
  --color-orange-active: #cf5512;
  --color-navy-hover: #1a3060;
  --color-navy-active: #0b1838;

  /* --- Lines & shadows --- */
  --border-subtle: rgba(15, 32, 77, 0.16);
  --border-input: rgba(15, 32, 77, 0.24);

  /* Cream alphas for dark (navy) fields */
  --cream-wash: rgba(252, 250, 245, 0.08);
  --cream-soft: rgba(252, 250, 245, 0.12);
  --cream-divider: rgba(252, 250, 245, 0.16);
  --cream-border: rgba(252, 250, 245, 0.3);
  --cream-sketch: rgba(252, 250, 245, 0.45);
  --shadow-card: 0 0 0.5px rgba(15, 32, 77, 0.08),
    0 16px 32px rgba(15, 32, 77, 0.12);
  --shadow-panel: 0 12px 40px rgba(15, 32, 77, 0.08);

  /* --- Shape --- */
  --radius-button: 12px;
  --radius-input: 12px;
  --radius-card: 16px;
  --radius-panel: 22px;
  --radius-pill: 999px;

  /* --- Layout rails ---
     In rem against the scaled root, so the measure grows with the type instead
     of against it — a reading rail holds about the same number of characters at
     any width. Each number is the rail's old pixel width over 16, so at the 1440
     design width every rail is exactly what it was: 1278, 1184, 928, 592, 572.

     rem rather than a fraction of --size-container, which is what these were
     first and was wrong on phones: 0.397 of a 390px container is a 155px copy
     rail inside a 390px viewport. A rail is a cap for wide screens, and it has
     to stay above the viewport on narrow ones so the content simply fills the
     width. The font already carries each band's own ideal, so rem does that by
     itself — at 390 the copy rail computes to 572px, far wider than the phone,
     and .rail-copy's width:100% takes over. */
  --rail-wide: 79.875rem; /* 1278 */
  --rail-standard: 74rem; /* 1184 */
  --rail-focus: 58rem; /* 928 */
  --rail-reading: 37rem; /* 592 */
  --rail-copy: 35.75rem; /* 572 */
  /* Spacing off --size-font, not the container: the font already carries each
     breakpoint's own ideal width, so a 390-wide phone gets a phone's gutter
     rather than a fraction of a 1440 desktop's. 2.5 x 16 = the old 40px, and
     7 x 16 = the old 112px. */
  --gutter: calc(var(--size-font) * 2.5);
  --section-pad: calc(var(--size-font) * 7);
  /* The live wordmark's own viewBox ratio (public/logos/SVG/Custom-Lowercase.svg).
     One token because the header and the footer both mask the same file, and the
     ratio was hardcoded in both — which silently went stale the first time the
     artwork was redrawn a pixel wider. Update this when the file changes. */
  --wordmark-aspect: 906.69 / 135.83;
  /* Cap height and baseline of the live wordmark, as fractions of its viewBox.
     These no longer set the wordmark's size — the fixed --logo-width and each
     mark's own ratio do that. They position it: each viewBox is tight to its own
     ink, so the header uses these to lift a descending J or a raised apostrophe out
     of the line box and centre the cap band instead. Defaults here, overridden per
     candidate by the logo review. Measurements: content/logo-metrics.ts. */
  --wordmark-cap: 0.9804;
  --wordmark-base: 0.9804;
  /* The live wordmark's width / height as a plain number, not a ratio expression:
     the header divides by it to get the height from the fixed width, and calc()
     needs a number on the right of a division. --wordmark-aspect above stays as
     the ratio form because the footer feeds it straight to aspect-ratio. Keep the
     two in step — 906.69 / 135.83 = 6.675. */
  --wordmark-ratio: 6.675;
  --header-height: 68px; /* 80px, reduced 15% */
  /* The navy announcement bar above the rail. Two lines below 620px, so the
     value grows there and every measurement derived from it follows. */
  --notice-height: 40px;
  /* Notice plus rail — the full height of the fixed chrome. Anything that has
     to clear all of it reads this rather than adding the two up itself. */
  --chrome-height: calc(var(--notice-height) + var(--header-height));
  --action-bar-height: 64px;

  /* --- Type families (next/font provides the variables) --- */
  --font-stack-body: var(--font-body, "Geist"), -apple-system, "Segoe UI",
    "Helvetica Neue", Arial, sans-serif;
  --font-stack-display: var(--font-display, "Fraunces"), Georgia,
    "Times New Roman", serif;
  /* h1 and h2 only, in Bold — see theme/typography.css. Deliberately a separate
     token from --font-stack-display: Fraunces still carries .t-feature,
     .t-capability and the module-level headings, so the two are not
     interchangeable and collapsing them would move type nobody asked to move. */
  --font-stack-heading: var(--font-heading, "Hornbill"), Georgia,
    "Times New Roman", serif;

  /* --- Type scale ---
     Sizes in rem against the scaling system's root font, so the whole scale
     moves with the viewport; the numbers are the old pixel values over 16, and
     at the 1440 design width they render as exactly those pixels again.

     rem rather than em on purpose: em would compound whenever a type class sits
     inside an element that has already set a font-size.

     Line-heights are unitless ratios rather than lengths. An em length here
     would resolve against the element's own new font-size and multiply, so
     Type/Display would come out at 120px of leading instead of 48. */
  --text-h1-size: 2.5rem; /* 40 */
  --text-h1-line: 1.2;
  --text-feature-size: 2.7rem; /* 43.2 */
  --text-feature-line: 1.1;
  --text-capability-size: 1.86rem; /* 29.76 */
  --text-capability-line: 1.178;
  --text-card-size: 1.5rem; /* 24 */
  --text-card-line: 1.16667;
  --text-body-lg-size: 1.1rem; /* 17.6 */
  --text-body-lg-line: 1.5;
  --text-body-size: 1rem; /* 16 */
  --text-body-line: 1.6;
  --text-nav-size: 0.875rem; /* 14 */
  --text-nav-line: 1.34;
  --text-eyebrow-size: 0.75rem; /* 12 */
  --text-eyebrow-line: 1.6;

  /* --- Buttons ---
     Compact geometry adopted site-wide with the conversion-focused homepage:
     44px tall with 12/26 padding, rather than the original 56px / 16px 32px
     block. Restraint here is what keeps a page with several actions on it from
     reading as a shouting match. */
  --button-height: 44px;
  --button-pad: 12px 26px;

  /* --- Forms --- */
  --input-height: 54px;
  --textarea-min-height: 140px;
}

/* The announcement bar stacks its sentence and its action here, so the chrome
   is 20px taller. --chrome-height, the spacer, and the header's top offset all
   derive from this one value. */
@media (max-width: 700px) {
  [data-theme="rj-sams"] {
    --notice-height: 60px;
  }
}

:root{--color-heating:var(--color-orange);--color-cooling:var(--color-blue)}
/* Shared thermal colors use the darker established brand palette. */
:root{--color-heating:#e05e17;--color-cooling:var(--color-navy)}