/* web/themes/techprosolutions/css/design-tokens.css */
/**
 * EasyTax homepage Design System — the single source of truth.
 *
 * Loaded (SMACSS "base") as a dependency of every homepage component library,
 * so any section on the page shares one spacing grid and one type scale.
 *
 * THE 4-PIXEL RULE: every margin/padding/gap/radius/width/height is a multiple
 * of 4px, expressed in rem (1rem = 16px). Never write a raw off-grid pixel
 * value in a component — consume these variables instead.
 *
 * TYPE SCALE (Manrope only, self-hosted per component @font-face):
 *   H1   clamp(2.25rem -> 3rem) / 800 / lh 1.15 / -0.02em  (hero only; FLUID
 *                                          36->48px between 390 and 1440, locked
 *                                          compact-hero endpoints — see
 *                                          summary/section1.md)
 *   H2   clamp(1.75rem -> 2.75rem) / 800 / lh 1.1 / -0.025em (EVERY section title,
 *                                          dark or light — only the colour may change.
 *                                          Widened 2026-07-09: top 40->44px, tighter
 *                                          leading/tracking per the inverse law)
 *   Num  clamp(2rem -> 2.5rem) / 800 / lh 1 / -0.03em (display numerals: hero
 *                                          stats + any oversized data moment)
 *   H3   1.25rem / 700 / lh 1.3 / -0.01em (card/tile titles)
 *   Lead clamp(1rem -> 1.125rem) / lh 1.6  (section subtitles / intro copy)
 *   Body 1rem / 400-500 / lh 1.6
 *   Overline 0.8125rem / 700 / +0.08em / uppercase (eyebrows, kickers)
 * Line-height & tracking follow the inverse law: big type tight & negative,
 * small type loose & positive.
 */

:root {
  /* ---- Brand (locked) ---- */
  --et-green: #3CB944;
  --et-green-2: #1D9E75;
  --et-navy: #1C3557;
  --et-ink: #1C3557;
  --et-body-color: #45464F;
  --et-wash: #E8F5E9;

  /* ---- Global highlight (dual-heading accent) ----
     The accent-coloured continuation of a section heading. Deliberately NOT the
     locked brand green (--et-green #3CB944) — this is its own token so the
     highlight can be tuned without touching the brand. Consumed by the
     .et-highlight-text utility below and by every section heading <span>. */
  --et-highlight-green: #28aa4a;

  /* ---- 4px spacing scale (rem model) ---- */
  --et-space-1: 0.25rem;   /*   4px */
  --et-space-2: 0.5rem;    /*   8px */
  --et-space-3: 0.75rem;   /*  12px */
  --et-space-4: 1rem;      /*  16px */
  --et-space-5: 1.25rem;   /*  20px */
  --et-space-6: 1.5rem;    /*  24px */
  --et-space-8: 2rem;      /*  32px */
  --et-space-10: 2.5rem;   /*  40px */
  --et-space-12: 3rem;     /*  48px */
  --et-space-16: 4rem;     /*  64px */
  --et-space-20: 5rem;     /*  80px */
  --et-space-24: 6rem;     /*  96px */
  --et-space-32: 8rem;     /* 128px */

  /* ---- Radii (locked) ---- */
  --et-radius-lg: 16px;
  --et-radius-sm: 12px;
  --et-radius-pill: 9999px;

  /* ---- Unified section rhythm ----
     EVERY major homepage <section> wrapper uses the same vertical padding.
     Exceptions (structural, documented in summary/): the hero's flush-bottom
     portrait edge and the full-bleed monitor section (padding must stay 0). */
  --et-section-pad-y: clamp(5rem, 8vw, 10rem); /* fluid 80px -> 160px — global vertical rhythm */
  --et-title-gap: 3rem;       /* 48px — section title -> first content block */

  /* ---- Type scale ---- */
  /* H1 is fluid (hero only): interpolates 36px (<=390) -> 48px (>=1440). Endpoints
     stay on the LOCKED compact-hero scale (2.25rem / 3rem) — only the space between
     them is fluid, so there is no hard tablet step. The real-browser extraction
     proved css/new.css `h1{font-size:40px!important}` was pinning the hero to 40px
     at every width (6-line wrap on mobile); the h1:has(.et-highlight-text) rule
     below re-asserts this token with !important. */
  --et-h1-size: clamp(2.25rem, 1.97rem + 1.14vw, 3rem); /* 36px -> 48px */
  --et-h1-weight: 800;
  --et-h1-lh: 1.15;
  --et-h1-track: -0.02em;

  --et-h2-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.75rem); /* 28px -> 44px */
  --et-h2-weight: 800;
  --et-h2-lh: 1.1;
  --et-h2-track: -0.025em;

  /* Display numerals — oversized data moments (hero stats etc.). */
  --et-num-size: clamp(2rem, 1.8rem + 0.8vw, 2.5rem); /* 32px -> 40px */
  --et-num-weight: 800;
  --et-num-lh: 1;
  --et-num-track: -0.03em;
  --et-heading-color: #1C3557;        /* on light backgrounds */
  --et-heading-color-inverse: #FFFFFF; /* on dark backgrounds */

  --et-h3-size: 1.25rem;
  --et-h3-weight: 700;
  --et-h3-lh: 1.3;
  --et-h3-track: -0.01em;

  --et-lead-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); /* 16px -> 18px */
  --et-body-size: 1rem;
  --et-body-sm-size: 0.9375rem; /* 15px — dense card body copy */
  --et-body-lh: 1.6;
  --et-body-lh-dense: 1.5; /* inside cards, where measure is short */

  --et-overline-size: 0.8125rem; /* 13px */
  --et-overline-weight: 700;
  --et-overline-track: 0.08em;

  /* Buttons: bold weight needs slight positive tracking. */
  --et-btn-track: 0.02em;

  /* ---- Motion (finance-appropriate: decisive ease-outs, never bounce) ----
     New/updated interactions consume these; legacy tuned animations keep
     their own curves until individually migrated. */
  --et-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --et-ease-swift: cubic-bezier(0.16, 1, 0.3, 1);
  --et-dur-press: 0.15s;
  --et-dur-hover: 0.25s;

  /* ---- Elevation (navy-tinted, soft + intentional) ---- */
  --et-shadow-rest: 0 1px 2px rgba(28, 53, 87, 0.06), 0 2px 8px rgba(28, 53, 87, 0.06);
  --et-shadow-lift: 0 4px 12px rgba(28, 53, 87, 0.10), 0 12px 32px rgba(28, 53, 87, 0.12);
  --et-shadow-press: 0 1px 4px rgba(28, 53, 87, 0.10);

  /* ---- Hairline (navy-cast divider/border on light surfaces) ---- */
  --et-hairline: rgba(28, 53, 87, 0.12);

  /* ---- Editorial / content surfaces (Blog + Services redesign) ----
     Structural additions for the article + services conversion surfaces.
     Brand green/navy stay the LOCKED tokens above; these are darker hover
     shades + neutral surfaces + the reading measure, never a second brand. */
  --et-navy-700: #14345A;   /* CTA hover (darker than --et-navy) */
  --et-green-600: #178C40;  /* accent hover */
  --et-muted: #5B6B7B;      /* secondary/meta text (AA on white) */
  --et-line: #E6EBF1;       /* card/section hairline on light */
  --et-surface: #FFFFFF;
  --et-surface-2: #F6F9FC;  /* washed section background */
  --et-measure: 44rem;      /* ~72ch optimal reading measure (704px) */

  /* SEO cockpit status colours (Workstream D). */
  --seo-good: #16A34A;
  --seo-warn: #F59E0B;
  --seo-bad: #DC2626;
}

/* Dual-heading accent — the highlighted continuation of any section title.
   ONE global colour for every homepage <h2> highlight span (and the hero H1
   highlight). It inherits the heading's size / weight / line-height / tracking
   from its parent; only the colour changes. Applied to a bare <span> so no
   component rule out-specifies it. */
.et-highlight-text {
  color: var(--et-highlight-green);
}

/* ============================================================================
   BASE-THEME NEUTRALIZER  (defeats css/new.css — verified against the live DOM)
   ----------------------------------------------------------------------------
   A headless-Chromium extraction of the real computed styles proved new.css
   ships two rogue element-level overrides that hijack every heading site-wide,
   BOTH !important, so component class rules alone could not win:

       h1        { font-size: 40px !important; line-height: 49px !important; }
       h1, h2    { text-transform: capitalize !important; }

   The first pinned the hero H1 to 40px/49px at EVERY width (measured: 6-line wrap
   at 390px, 40px on desktop instead of the 48px token). The second force-Title-
   Cased our sentence-case section titles ("Be your own tax expert" rendered "Be
   Your Own Tax Expert").

   We reclaim control on EXACTLY the dual-colour section headings — the ones that
   carry an .et-highlight-text accent — so no base-theme page is disturbed.
   Specificity 0-1-1 + !important out-ranks new.css's 0-0-1 !important rules. */
:is(h1, h2, h3, h4, h5, h6):has(.et-highlight-text) {
  font-family: 'Manrope', system-ui, sans-serif; /* belt-and-suspenders vs the base h1-h6 Roboto rule */
  text-transform: none !important;   /* kill new.css `h1,h2` capitalize */
  text-wrap: balance;                /* even line lengths — kills orphan words */
}

/* Hero-scale H1: reclaim the size + leading that new.css `h1{...!important}` stole,
   and make it fluid. Unitless line-height so leading tracks the clamped size, and
   the highlight <span> (display:inline, inherits size) stays on the same baseline. */
h1:has(.et-highlight-text) {
  font-size: var(--et-h1-size) !important;
  line-height: var(--et-h1-lh) !important;
  letter-spacing: var(--et-h1-track);
}

/* Mobile rhythm: the one sanctioned redefinition point. */
@media (max-width: 768px) {
  :root {
    --et-section-pad-y: 3rem; /* 48px */
    --et-title-gap: 1.5rem;   /* 24px */
  }
}

/* ------------------------------------------------------------------ *
 * Editor pencil (Fix 4) — access-gated "Edit" control on the blog +
 * service full templates. The Twig gate (node.access('update')) means
 * the markup is only emitted for permitted users, never anonymous.
 * Lives here because blog_post + service_page both depend on
 * design_tokens, so one definition covers both surfaces.
 * ------------------------------------------------------------------ */
.et-post, .et-svc { position: relative; }
.et-edit-link {
  position: absolute; top: var(--et-space-4); right: var(--et-space-4); z-index: 45;
  display: inline-flex; align-items: center; gap: var(--et-space-2);
  padding: var(--et-space-1) var(--et-space-3);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  font-size: 0.8125rem; font-weight: 600; line-height: 1; letter-spacing: 0.02em;
  color: var(--et-navy); background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.5); border-radius: var(--et-radius-pill);
  text-decoration: none; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.et-edit-link:hover { color: #0C6B2C; border-color: #0C6B2C; background: #fff; }
.et-edit-link:focus-visible { outline: 2px solid var(--et-green); outline-offset: 2px; }
.et-edit-link svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Icon-only on mobile so it never crowds the hero. */
@media (max-width: 768px) {
  .et-edit-link { padding: var(--et-space-2); }
  .et-edit-link span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}