/* ═══════════════════════════════════════════════════════════════════════════
   Hozio Studio — Main Stylesheet
   Hozio Design System · brand layer + base element styles

   Token declarations live in :root. Base styles for raw HTML elements live
   below. Component styling is in primitives.css. Client-specific additions
   go at the bottom using the client prefix (.tga-*, .bs-*, etc.).

   Full token definitions and use cases:
   design-system/visual-design-system.md
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Design Tokens ─────────────────────────────────────────────────────── */
:root {
    /* Brand — primary identity color + paired variants
       --brand-text is brand used as TEXT on light backgrounds. Defaults to
       --brand when brand passes 4.5:1 contrast on white; Claude Code
       overrides to a darker derived value if it fails during setup.
       --brand-deep is the darkest shade in the brand family — used for
       footers and any place that needs to sit deeper than a standard
       dark section (which uses --brand directly). */
    --brand:                 #114899;
    --brand-hover-on-light:  #0A2552;
    --brand-hover-on-dark:   #2A6BCF;
    --brand-pale:            color-mix(in srgb, var(--brand) 10%, white);
    --brand-deep:            #071B3F;
    --brand-text:            #114899;
    --text-on-brand:         #FFFFFF;

    /* Accent — CTA/button color + paired variants
       --accent-text is accent used as TEXT on light backgrounds. Must pass
       4.5:1 contrast on white. Light accents (like pale green) will have a
       much darker --accent-text to remain readable. */
    --accent:                 #A5DC76;
    --accent-hover-on-light:  #7EC142;
    --accent-hover-on-dark:   #CDE8A8;
    --accent-pale:            color-mix(in srgb, var(--accent) 10%, white);
    --accent-text:            #4A7A32;
    --text-on-accent:         #1F2937;

    /* Emphasis — decorative accent for inline marks/brackets/pullquotes.
       Defaults to the accent (pop) color; override per client for a distinct
       decorative hue (e.g. a brand orange that isn't the CTA color). */
    --emphasis:               var(--accent);

    /* Text */
    --text-heading: #1F2937;
    --text-body:    #374151;
    --text-muted:   #6B7280;

    /* Backgrounds */
    --bg-page:         #FFFFFF;
    --bg-alt:          #F9FAFB;
    --bg-dark-section: var(--brand);

    /* Border & focus */
    --border:     #E5E7EB;
    --focus-ring: var(--brand);

    /* Navigation links (header nav, mobile menu, mega menu) */
    --nav-link:       #111111;            /* near-black nav links at rest */
    --nav-link-hover: var(--brand);

    /* Utility bar links (contact strip above main nav — smaller than nav links)
       Defaults assume a dark-background utility bar. The .hzo-utility-bar--light
       modifier class flips these tokens locally for a pale-bg utility bar. */
    --utility-link:       rgba(255, 255, 255, 0.85);
    --utility-link-hover: #FFFFFF;

    /* Footer links (light footer variant; dark footer uses white rgba) */
    --footer-link:       var(--text-muted);
    --footer-link-hover: var(--brand);

    /* Semantic state */
    --error:      #DC2626;
    --error-bg:   #FEF2F2;
    --success:    #16A34A;
    --success-bg: #F0FDF4;

    /* Fonts */
    --font-heading: "DM Serif Display", Georgia, "Times New Roman", serif;
    --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-number:  "DM Serif Display", Georgia, "Times New Roman", serif;

    /* ── Typography scale (editable by the Hozio Studio Live design widget) ──
       Size: per-step base sizes consumed via calc() by the heading/body
       selectors below. The 7-zone responsive ladder redefines --fs-* at each
       breakpoint; both real headings (h1-h6) and the visual-heading classes
       read the same tokens, so a single ladder drives both. Three scale
       multipliers let the widget resize globally or per group WITHOUT touching
       the hand-tuned per-step values — all default to 1 (no change).
       Weight: --font-weight-body sets body weight; --font-weight-heading, when
       set, overrides ALL heading weights to one value (left UNSET by default so
       each level keeps its tuned weight via the var() fallback). --fw-* are the
       named weight scale primitives.css components consume. */
    --hzo-type-scale:    1;   /* Overall text size  */
    --hzo-heading-scale: 1;   /* Headings only      */
    --hzo-body-scale:    1;   /* Body/label text    */

    --fs-body: 16px;
    --fs-h1:   32px;
    --fs-h2:   24px;
    --fs-h3:   20px;
    --fs-h4:   17px;
    --fs-h5:   14px;
    --fs-h6:   12px;

    --font-weight-body: 400;
    /* --font-weight-heading is intentionally unset: headings fall back to
       their per-level weights below until the widget assigns one. */

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

    /* Spacing scale (8-point + intermediates for 7-zone responsive scaling).
       The three `-2` tokens fill gaps in the original scale so primitives
       can step smoothly across the six CSS breakpoints (480, 768, 1024,
       1250, 1440, 1920) without big jumps in padding/gap values. */
    --space-xs:     4px;
    --space-sm:     8px;
    --space-md:     16px;
    --space-lg:     24px;
    --space-lg-2:   32px;
    --space-xl-2:   40px;
    --space-xl:     48px;
    --space-2xl-2:  56px;
    --space-2xl:    64px;
    --space-3xl:    80px;

    /* Corner radius */
    --radius-input: 8px;
    --radius-card:  12px;
    --radius-pill:  9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12);

    /* Motion */
    --transition-base: 200ms;

    /* Z-index scale */
    --z-sticky-bar: 10;
    --z-header:     20;
    --z-drawer:     30;
    --z-overlay:    40;
    --z-modal:      50;
    --z-popover:    60;
    --z-toast:      70;

    /* Content widths */
    --container-max-width: 1350px;
    --prose-max-width:     65ch;

    /* Container padding (side padding for .hzo-container, per breakpoint) */
    --container-padding-mobile:  16px;
    --container-padding-tablet:  32px;
    --container-padding-desktop: 64px;
}

/* ─── Base Elements ─────────────────────────────────────────────────────── */

/* Minimal reset: remove browser defaults that trip up layouts */
*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--font-weight-body, 400);
    font-size: calc(var(--fs-body) * var(--hzo-type-scale, 1) * var(--hzo-body-scale, 1));
    line-height: var(--body-line-height, 1.6);
    letter-spacing: var(--body-letter-spacing, normal);
    color: var(--text-body);
    background-color: var(--bg-page);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading, 400);
    line-height: 1.15;
    color: var(--text-heading);
    margin: 0 0 var(--space-md);
}

h5, h6 {
    font-family: var(--font-body);
    color: var(--text-heading);
    margin: 0 0 var(--space-md);
}

/* Headings — 7-zone responsive scale matching the six CSS breakpoints
   (480, 768, 1024, 1250, 1440, 1920). Each level's font-size reads its
   --fs-* token through the scale multipliers; the breakpoint blocks below
   redefine only the tokens (on :root), so the hand-tuned ladder is preserved
   and the .hzo-visual-* classes reuse the same tokens. h1-h4 follow the
   heading-size control; h5/h6 (small label text) follow the body-size one.
   font-weight falls back to each level's tuned weight until the widget sets
   --font-weight-heading. */
h1 { font-size: calc(var(--fs-h1) * var(--hzo-type-scale, 1) * var(--hzo-heading-scale, 1) * var(--h1-scale, 1)); font-weight: var(--font-weight-heading, var(--h1-weight, 700)); line-height: 1.05; color: var(--h1-color, var(--text-heading)); }
h2 { font-size: calc(var(--fs-h2) * var(--hzo-type-scale, 1) * var(--hzo-heading-scale, 1) * var(--h2-scale, 1)); font-weight: var(--font-weight-heading, var(--h2-weight, 700)); line-height: 1.1; color: var(--h2-color, var(--text-heading)); }
h3 { font-size: calc(var(--fs-h3) * var(--hzo-type-scale, 1) * var(--hzo-heading-scale, 1) * var(--h3-scale, 1)); font-weight: var(--font-weight-heading, var(--h3-weight, 600)); line-height: 1.2; color: var(--h3-color, var(--text-heading)); }
h4 { font-size: calc(var(--fs-h4) * var(--hzo-type-scale, 1) * var(--hzo-heading-scale, 1) * var(--h4-scale, 1)); font-weight: var(--font-weight-heading, var(--h4-weight, 600)); line-height: 1.3; color: var(--h4-color, var(--text-heading)); }
h5 { font-size: calc(var(--fs-h5) * var(--hzo-type-scale, 1) * var(--hzo-body-scale, 1) * var(--h5-scale, 1)); font-weight: var(--font-weight-heading, var(--h5-weight, 500)); line-height: 1.4; color: var(--h5-color, var(--text-heading)); }
h6 { font-size: calc(var(--fs-h6) * var(--hzo-type-scale, 1) * var(--hzo-body-scale, 1) * var(--h6-scale, 1)); font-weight: var(--font-weight-heading, var(--h6-weight, 600)); line-height: 1.4; text-transform: uppercase; letter-spacing: 0.05em; color: var(--h6-color, var(--text-heading)); }

@media (min-width: 480px) {
    :root { --fs-h1: 36px; --fs-h2: 26px; --fs-h3: 21px; --fs-h4: 18px; --fs-h5: 14px; --fs-h6: 13px; }
}
@media (min-width: 768px) {
    :root { --fs-h1: 40px; --fs-h2: 28px; --fs-h3: 22px; --fs-h4: 19px; --fs-h5: 15px; --fs-h6: 13px; }
}
@media (min-width: 1024px) {
    :root { --fs-h1: 44px; --fs-h2: 32px; --fs-h3: 24px; --fs-h4: 20px; --fs-h5: 16px; --fs-h6: 13px; }
}
@media (min-width: 1250px) {
    :root { --fs-h1: 48px; --fs-h2: 36px; --fs-h3: 26px; --fs-h4: 21px; --fs-h5: 16px; --fs-h6: 14px; }
}
@media (min-width: 1440px) {
    :root { --fs-h1: 52px; --fs-h2: 38px; --fs-h3: 27px; --fs-h4: 22px; --fs-h5: 17px; --fs-h6: 14px; }
}
@media (min-width: 1920px) {
    :root { --fs-h1: 56px; --fs-h2: 40px; --fs-h3: 28px; --fs-h4: 22px; --fs-h5: 17px; --fs-h6: 14px; }
}

p { margin: 0 0 var(--space-md); }

/* ── Visual heading classes ──────────────────────────────────────────────
   SEO pattern: section headlines are <p> tags (the eyebrow above is the
   real heading tag carrying the keyword). These classes make <p> elements
   look exactly like headings without being heading tags.
   See quality-rules.md §6.2 for the full rationale. */
/* These reuse the same --fs-h1..4 tokens as the real headings above, so the
   responsive ladder + the widget's heading-size control drive both with one
   source of truth (the breakpoint :root redefinitions above). */
.hzo-visual-h1 {
    font-family: var(--font-heading);
    font-size: calc(var(--fs-h1) * var(--hzo-type-scale, 1) * var(--hzo-heading-scale, 1) * var(--h1-scale, 1));
    font-weight: var(--font-weight-heading, var(--h1-weight, 700)); line-height: 1.05;
    color: var(--h1-color, var(--text-heading));
}
.hzo-visual-h2 {
    font-family: var(--font-heading);
    font-size: calc(var(--fs-h2) * var(--hzo-type-scale, 1) * var(--hzo-heading-scale, 1) * var(--h2-scale, 1));
    font-weight: var(--font-weight-heading, var(--h2-weight, 700)); line-height: 1.1;
    color: var(--h2-color, var(--text-heading));
}
.hzo-visual-h3 {
    font-family: var(--font-heading);
    font-size: calc(var(--fs-h3) * var(--hzo-type-scale, 1) * var(--hzo-heading-scale, 1) * var(--h3-scale, 1));
    font-weight: var(--font-weight-heading, var(--h3-weight, 600)); line-height: 1.2;
    color: var(--h3-color, var(--text-heading));
}
.hzo-visual-h4 {
    font-family: var(--font-heading);
    font-size: calc(var(--fs-h4) * var(--hzo-type-scale, 1) * var(--hzo-heading-scale, 1) * var(--h4-scale, 1));
    font-weight: var(--font-weight-heading, var(--h4-weight, 600)); line-height: 1.3;
    color: var(--h4-color, var(--text-heading));
}

/* Dark section: display + visual headings go pure white. Without this,
   `.hzo-section--dark p` (85% white) wins on these <p>-based heading
   classes since it has higher specificity than .hzo-display / .hzo-visual-*
   alone — leaving the headline visually the same color as the subtitle. */
.hzo-section--dark .hzo-display,
.hzo-section--dark .hzo-visual-h1,
.hzo-section--dark .hzo-visual-h2,
.hzo-section--dark .hzo-visual-h3,
.hzo-section--dark .hzo-visual-h4 { color: var(--heading-color-on-dark, #fff); }

/* Widget-editable heading type attributes — default to no-op (normal/none),
   so rendering is unchanged until the design widget sets one. */
h1, h2, h3, h4,
.hzo-visual-h1, .hzo-visual-h2, .hzo-visual-h3, .hzo-visual-h4 {
    letter-spacing: var(--heading-letter-spacing, normal);
    text-transform: var(--heading-transform, none);
}
/* .hzo-display has its own tuned -0.015em tracking — tokenized in primitives.css
   so it keeps that default but still follows the heading type-attr controls. */

a {
    color: var(--brand-text);
    text-decoration: var(--link-decoration, underline);
    transition: color var(--transition-base) ease, text-decoration-thickness var(--transition-base) ease;
}

a:visited { color: var(--brand-text); }
a:hover {
    color: var(--brand-hover-on-dark); /* brighter brand — a clear jump on hover */
    text-decoration-thickness: 1.25px; /* just a hair thicker than the resting underline */
}

:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

img { max-width: 100%; height: auto; }

input, select, textarea {
    font-size: 16px; /* 16px prevents iOS zoom on focus */
}

button, [role="button"], label[for], summary { cursor: pointer; }

/* ─── Section Layout ──────────────────────────────────────────────────────
   Vertical padding scales across three zones via the QA breakpoints:
   --space-xl (48px) below 768, --space-2xl (64px) at tablet, --space-3xl
   (80px) at desktop. Horizontal padding belongs to .hzo-container. */
.hzo-section { padding: var(--space-xl) 0; }

@media (min-width: 768px) {
    .hzo-section { padding: var(--space-2xl) 0; }
}
@media (min-width: 1250px) {
    .hzo-section { padding: var(--space-3xl) 0; }
}