/*
 * Token styles — brand-templated for engagement isjac.
 *
 * Source: vendor/zysys/wp-runtime/assets/css/tokens.css.template
 * Built:  wp-content/zysys-generated/isjac/css/tokens.css
 *
 * The template substitutes isjac at composer install. To change
 * a rule, edit this template and re-run `composer install` (or
 * `composer update`) in the consumer repo.
 *
 * Naming convention: <brand>-<class> per ADR-002.
 */

/* Cascade Layers — the runtime declares its layer order here so engagement
 * code automatically wins on conflict. Adding or removing a runtime sheet
 * stops being a breaking change for consumers because layer priority is
 * declarative, not enqueue-order-dependent. */
@layer reset, tokens, primitives, components, engagement, overrides;

/* Register the overlay opacity as a typed custom property. Gives it a
 * declared <number> type + a default value, and unlocks smooth CSS
 * transitions when the opacity is changed dynamically (e.g., the page
 * fading the hero overlay during scroll). Without `@property`, browsers
 * treat custom properties as strings and can't interpolate them. */
@property --isjac-hero-overlay-opacity {
	syntax: '<number>';
	inherits: true;
	initial-value: 0.7;
}

:root {
	/* ---------- Color ---------- *
	 * Mirrors brand-guide §04 + §19 token reference. Values here are the
	 * canonical source; raw hex is permitted ONLY in this file.
	 */
	/* Base colors in OKLCH for perceptual uniformity (ADR-013 Phase B/2b).
	 * Hex equivalents retained as inline comments for grep-ability and for
	 * any non-OKLCH consumer (older browser, design tool import). OKLCH
	 * is authoritative; if the two ever disagree, the OKLCH value wins.
	 * `color-mix(in oklch, …)` derivation reads these as bases. */
	--isjac-color-ink:            oklch(14.94% 0.0656 266.3); /* #020726 */
	--isjac-color-ink-2:          oklch(27.55% 0.0705 263.5); /* #15264A — modal scrim; deep hero panels */
	--isjac-color-brand-deep:     oklch(41.50% 0.0768 234.1); /* #15526F */
	--isjac-color-brand-mid:      oklch(59.41% 0.0789 243.0); /* #5384AA */
	--isjac-color-brand-wash:     oklch(97.03% 0.0103 247.9); /* #F0F6FC */
	--isjac-color-paper:          oklch(98.95% 0.0059 350.8); /* #FFFAFC */
	--isjac-color-muted:          oklch(51.03% 0.0000 89.9);  /* #666666 */
	--isjac-color-rule:           oklch(91.85% 0.0150 251.2); /* #DDE5EE */
	--isjac-color-border:         oklch(90.08% 0.0084 271.3); /* #DCDEE4 — stronger rule for cards, inputs */
	--isjac-color-error:          oklch(47.62% 0.1942 27.3);  /* #B0000F */
	--isjac-color-warning:        oklch(60.17% 0.1304 60.1);  /* #B86B1C — brand-guide §02 */
	--isjac-color-success:        oklch(52.96% 0.1157 156.4); /* #1E7F4F */
	--isjac-color-info:           var(--isjac-color-brand-mid);

	/* Semantic aliases — components reference these, not the raw palette. */
	--isjac-text-primary:         var(--isjac-color-ink);
	--isjac-text-muted:           var(--isjac-color-muted);
	--isjac-text-inverse:         var(--isjac-color-paper);
	--isjac-surface-page:         var(--isjac-color-paper);
	--isjac-surface-card:         var(--isjac-color-paper);  /* per brand-guide §A — Paper canvas, no pure white. Cards lift via border + shadow, not contrast. */
	--isjac-surface-tinted:       var(--isjac-color-brand-wash);
	--isjac-surface-dark:         var(--isjac-color-ink);
	--isjac-border-default:       var(--isjac-color-rule);
	--isjac-border-strong:        var(--isjac-color-border);
	--isjac-button-primary-bg:     var(--isjac-color-brand-deep);
	--isjac-button-primary-text:   var(--isjac-color-paper);
	/* The single knob for hover/focus/active derivation. Component rules
	 * derive state colors inline via color-mix() against this lift value;
	 * tuning it here adjusts every variant + surface in the brand. Replaces
	 * the prior per-variant --button-*-hover tokens (ADR-013 Phase B/2). */
	--isjac-state-lift: 12%;

	/* ---------- Typography ---------- *
	 * Three faces, per brand-guide §06: DM Sans (display/UI), Inter (body
	 * long-form), IBM Plex Mono (telemetry). Any other family loaded by
	 * the parent theme or a plugin is a regression — see the dequeue in
	 * wp-content/themes/kadence-isjac/functions.php.
	 */
	--isjac-font-family:          "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--isjac-font-body:            "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--isjac-font-mono:            "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
	--isjac-font-weight-regular:  400;
	--isjac-font-weight-medium:   500;
	--isjac-font-weight-bold:     700;
	--isjac-font-weight-black:    900;
	--isjac-font-size-micro:      0.8125rem;  /* 13 — legal, trust, microcopy   */
	--isjac-font-size-small:      0.875rem;   /* 14 — meta, captions, secondary */
	--isjac-font-size-base:       1rem;
	--isjac-font-size-body:       1.0625rem;  /* 17 — body running prose       */
	--isjac-font-size-lg:         1.25rem;     /* h3 — section subhead    */
	--isjac-font-size-xl:         clamp(1.75rem, calc(1.25rem + 1.5vw), 2rem);   /* h2 */
	--isjac-font-size-h1:         clamp(2rem, calc(1.25rem + 2.5vw), 2.5rem);    /* h1 — single-post + page title */
	--isjac-font-size-display:    clamp(2.5rem, calc(1.5rem + 4vw), 3.5rem);     /* hero / display */
	--isjac-line-height-base:     1.5;
	--isjac-line-height-tight:    1.2;
	--isjac-baseline:             1.6;

	/* ---------- Layout ---------- */
	--isjac-space-1:              0.25rem;  /* 4  — icon-to-label gap inside a chip */
	--isjac-space-2:              0.5rem;   /* 8  — default gap between inline UI */
	--isjac-space-3:              0.75rem;  /* 12 — tight stack (icon + label) */
	--isjac-space-4:              1rem;     /* 16 — standard card padding; default block stack */
	--isjac-space-5:              1.5rem;   /* 24 — featured card / article header gap; default 3-col grid gap */
	--isjac-space-6:              2rem;     /* 32 — hero text container padding; card-to-card gap */
	--isjac-space-7:              3rem;     /* 48 — feature blocks; subsection separation */
	--isjac-space-8:              4rem;     /* 64 — section header to body */
	--isjac-space-9:              6rem;     /* 96 — major section spacing on desktop */

	--isjac-container:            1290px;   /* Kadence global content width */
	--isjac-gutter-edge:          1.5rem;   /* minimum left/right gutter on any viewport ≥ 720 px */

	--isjac-radius-sm:            6px;   /* form fields                    */
	--isjac-radius-md:            8px;   /* buttons, cards                 */
	--isjac-radius-lg:            12px;  /* heroes, pull-quotes            */

	/* Component padding (micro). 8-pt grid; static (does not scale with
	 * viewport — internal layouts feel cheap when they shift). 1:2 ratio
	 * to gap: 16-pad inside → 24/32-gap between. */
	--isjac-pad-xs:  0.5rem;   /* 8  */
	--isjac-pad-sm:  0.75rem;  /* 12 */
	--isjac-pad-md:  1rem;     /* 16 */
	--isjac-pad-lg:  1.5rem;   /* 24 */
	--isjac-pad-xl:  2rem;     /* 32 */
	--isjac-pad-2xl: 3rem;     /* 48 */

	/* Section padding (macro). Vertical padding between major page sections.
	 * Fluid clamp() so spacing scales continuously between viewports rather
	 * than stair-stepping at breakpoints. */
	--isjac-section-xs:  clamp(1.5rem, calc(0.75rem + 3vw), 2rem);   /* 24 → 32  */
	--isjac-section-sm:  clamp(2rem,   calc(1rem    + 4vw), 3rem);   /* 32 → 48  */
	--isjac-section-md:  clamp(2.5rem, calc(1rem    + 5vw), 4rem);   /* 40 → 64  */
	--isjac-section-lg:  clamp(3rem,   calc(1rem    + 6vw), 5rem);   /* 48 → 80  */
	--isjac-section-xl:  clamp(4rem,   calc(1.5rem  + 8vw), 6rem);   /* 64 → 96  */
	--isjac-section-2xl: clamp(5rem,   calc(2rem    + 10vw), 7rem);  /* 80 → 112 */

	/* Gaps — grid / flex gap between cards or list items. */
	--isjac-gap-tight:    1rem;     /* 16 — chip rows, dense lists */
	--isjac-gap-default:  1.5rem;   /* 24 — standard 3-col card grid */
	--isjac-gap-spacious: 2rem;     /* 32 — featured row, complex cards */
	--isjac-gap-fluid:    clamp(1rem, 2vw, 2rem);

	/* Content widths — reading-line + container caps. 73ch reads at the
	 * 18-19px body type used by the brand without forcing short-line scan;
	 * 65ch felt cramped at this type size. Wide variant scales for
	 * sectioned long-form layouts. */
	--isjac-content-prose:        73ch;
	--isjac-content-prose-wide:   82ch;
	--isjac-content-constrained:  clamp(20rem, 90vw, 72rem); /* ~1152px max */
	--isjac-content-full:         100%;

	/* Pill radius — chip rows, toggle pills, dashboard avatars. */
	--isjac-radius-pill: 9999px;

	--isjac-input-min-height:     44px;
	--isjac-input-padding-x:      0.875rem;  /* 14 — brand spec field x-pad */
	--isjac-input-icon-slot:      3rem;      /* right-edge clearance for icon affordances (search, etc.) */
	--isjac-button-min-height:    44px;
	--isjac-button-font-size:     0.9375rem; /* 15 — brand-guide §09 button label */
	--isjac-content-max-width:    640px;

	/* Shadows — brand-guide §Surfaces (ADR-013 Phase C). Cards rest with
	 * --shadow-card, lift to --shadow-card-hover on hover; Floating
	 * elements (modals, dropdowns, popovers) use --shadow-overlay — a
	 * two-layer cast that reads as "above the page." The page-surface
	 * gradient does most of the lifting, so card rest is intentionally
	 * subtle. Raw rgba mirrors brand-guide §Surfaces spec table; matches
	 * the ink color (#020726) with alpha. */
	--isjac-shadow-card:          0 1px 3px rgba(2, 7, 38, 0.06), 0 2px 8px rgba(2, 7, 38, 0.04);
	--isjac-shadow-card-hover:    0 4px 12px rgba(2, 7, 38, 0.10);
	--isjac-shadow-overlay:       0 4px 12px rgba(2, 7, 38, 0.12), 0 16px 40px rgba(2, 7, 38, 0.08);
	--isjac-shadow-hero:          0 24px 64px rgba(2, 7, 38, 0.10);

	/* ---------- Motion ---------- *
	 * Brand-guide §19 canon. Durations and eases are global; component CSS
	 * references these instead of inventing local timings.
	 */
	--isjac-dur-fast:             120ms;
	--isjac-dur-base:             200ms;
	--isjac-dur-slow:             320ms;
	--isjac-ease-standard:        cubic-bezier(0.4, 0, 0.2, 1);
	--isjac-ease-emphasis:        cubic-bezier(0.2, 0.8, 0.2, 1);
	--isjac-ease-exit:            cubic-bezier(0.4, 0, 1, 1);

	/* ---------- Focus ---------- *
	 * Two-stop ring — paper inner halo, brand-deep outer. Component focus
	 * states reference this directly rather than reimplementing the ring.
	 */
	--isjac-focus-ring:           0 0 0 2px var(--isjac-color-paper),
	                              0 0 0 4px var(--isjac-color-brand-deep);

	/* ---------- Page-surface gradient ---------- *
	 * The single source of truth for the brand background — two Brand-Wash
	 * radial pulses on a Paper canvas, exactly as brand-guide §05 spells
	 * out. Body and any full-bleed surface that needs the page texture
	 * references this token; never reconstruct the gradient inline.
	 */
	--isjac-page-background:
		radial-gradient(circle at top left,     var(--isjac-color-brand-wash), transparent 60%),
		radial-gradient(circle at bottom right, var(--isjac-color-brand-wash), transparent 65%),
		var(--isjac-color-paper);

	/* ---------- Hero ---------- *
	 * Customizer-owned (Appearance → Customize → ISJAC Brand). The values
	 * here are the last-resort fallbacks if the inline injection ever
	 * fails to load.
	 */
	--isjac-hero-bg-image:        none;
	--isjac-hero-overlay-opacity: 0.7;

	/* The canonical hero/dark-surface overlay recipe per brand-guide §05.
	 * Define ONCE so the hero panel, the bottom CTA, and any future
	 * dark-image surface share the same gradient — change the value here
	 * and every consumer updates. The opacity input is registered via
	 * `@property` below so it has a typed initial-value and can be
	 * transitioned smoothly. The `color-mix(... , transparent)` pattern is
	 * load-bearing — mixing with the same source color (a common bug)
	 * produces 100% opacity and hides the background image. */
	--isjac-hero-overlay-gradient: linear-gradient(
		135deg,
		color-mix(in srgb, var(--isjac-color-ink) calc(var(--isjac-hero-overlay-opacity) * 100%), transparent) 0%,
		color-mix(in srgb, var(--isjac-color-brand-deep) calc((var(--isjac-hero-overlay-opacity) - 0.15) * 100%), transparent) 100%
	);

	/* ---------- New primitives surfaced by the brand-guide audit ---------- *
	 * These are values the brand guide hardcoded in component rules and
	 * that the audit promoted to tokens so per-component slots below can
	 * reference them. Adding a value here is the only legal place; raw
	 * px / em outside this :root block is a regression.
	 */
	--isjac-font-size-eyebrow:           0.6875rem;  /* 11 — brand-guide §06 caption scale */
	--isjac-letter-spacing-eyebrow:      0.22em;    /* §06 — wide editorial tracking */
	--isjac-letter-spacing-heading:      -0.02em;   /* h1 / h2 — tightened display */
	--isjac-letter-spacing-heading-tight: -0.03em;  /* hero / display — even tighter */
	--isjac-letter-spacing-heading-minor: -0.01em;  /* h3 */

	/* ---------- Component-semantic tokens ---------- *
	 * Per-component, per-property slots that reference the primitives
	 * above. Brand changes happen by editing this section; consumers
	 * update automatically. Component CSS must read THESE, never the
	 * primitives directly — so the brand guide is the single source of
	 * truth and component rules become thin pins.
	 *
	 * Naming: --isjac-<component>-<property>.
	 */

	/* Eyebrow */
	--isjac-eyebrow-font-family:    var(--isjac-font-mono);
	--isjac-eyebrow-font-size:      var(--isjac-font-size-eyebrow);
	--isjac-eyebrow-font-weight:    var(--isjac-font-weight-medium);
	--isjac-eyebrow-letter-spacing: var(--isjac-letter-spacing-eyebrow);
	--isjac-eyebrow-color:          var(--isjac-color-brand-mid);

	/* Section h2 (`.section-title` / `.isjac-section__title`) */
	--isjac-h2-font-family:    var(--isjac-font-family);
	--isjac-h2-font-size:      var(--isjac-font-size-h1);   /* brand ramp: section title resolves to the h1-named primitive (40px clamp) */
	--isjac-h2-font-weight:    var(--isjac-font-weight-bold);
	--isjac-h2-line-height:    var(--isjac-line-height-tight);
	--isjac-h2-letter-spacing: var(--isjac-letter-spacing-heading);
	--isjac-h2-color:          var(--isjac-color-ink);

	/* Section h3 (`h3.sub` / `.isjac-benefit__title`) */
	--isjac-h3-font-family:    var(--isjac-font-family);
	--isjac-h3-font-size:      var(--isjac-font-size-xl);
	--isjac-h3-font-weight:    var(--isjac-font-weight-bold);
	--isjac-h3-line-height:    var(--isjac-line-height-tight);
	--isjac-h3-letter-spacing: var(--isjac-letter-spacing-heading-minor);
	--isjac-h3-color:          var(--isjac-color-ink);

	/* Body paragraph (default running prose) */
	--isjac-body-font-family: var(--isjac-font-body);
	--isjac-body-font-size:   var(--isjac-font-size-body);
	--isjac-body-font-weight: var(--isjac-font-weight-regular);
	--isjac-body-line-height: var(--isjac-baseline);
	--isjac-body-color:       var(--isjac-color-ink);

	/* Prose link — inline anchor inside a body paragraph */
	--isjac-link-font-family:      inherit;  /* surrounds-its-text */
	--isjac-link-font-size:        inherit;
	--isjac-link-font-weight:      var(--isjac-font-weight-medium);
	--isjac-link-color:            var(--isjac-color-brand-mid);
	--isjac-link-color-hover:      var(--isjac-color-brand-deep);
	--isjac-link-text-decoration:  none;

	/* Iconography — brand-guide §13. Inline stroke icon, 32px box, 1.5px
	 * stroke, brand-deep, no fill. Feature variant doubles the box. */
	--isjac-icon-size:         32px;
	--isjac-icon-size-feature: 64px;
	--isjac-icon-stroke:       var(--isjac-color-brand-deep);
	--isjac-icon-stroke-width: 1.5;
	--isjac-icon-fill:         none;

	/* Section h4 (minor heading) — brand-guide §06 type ramp */
	--isjac-h4-font-family:    var(--isjac-font-family);
	--isjac-h4-font-size:      var(--isjac-font-size-lg);  /* 20 */
	--isjac-h4-font-weight:    var(--isjac-font-weight-bold);
	--isjac-h4-line-height:    var(--isjac-line-height-tight);
	--isjac-h4-letter-spacing: -0.005em;
	--isjac-h4-color:          var(--isjac-color-ink);

	/* Page H1 — focused/auth pages where a 56px+ hero is too heavy. Spec
	 * gap: brand-guide §06 ramp documents hero / section / minor headings
	 * but no "page H1 for a single-purpose page" slot. Resolves to h3-size
	 * (32px clamp) with h3 letter-spacing, treating compact pages as one
	 * step below a full hero. Used by auth, error, and confirmation pages. */
	--isjac-page-h1-font-family:    var(--isjac-h3-font-family);
	--isjac-page-h1-font-size:      var(--isjac-h3-font-size);
	--isjac-page-h1-font-weight:    var(--isjac-h3-font-weight);
	--isjac-page-h1-line-height:    var(--isjac-h3-line-height);
	--isjac-page-h1-letter-spacing: var(--isjac-h3-letter-spacing);
	--isjac-page-h1-color:          var(--isjac-color-ink);

	/* Form label — brand-guide §07 form fields. */
	--isjac-label-font-family: var(--isjac-font-family);
	--isjac-label-font-size:   var(--isjac-font-size-micro);  /* 13 */
	--isjac-label-font-weight: var(--isjac-font-weight-medium);
	--isjac-label-color:       var(--isjac-color-ink);

	/* Help text — small caption under form fields. New 12px primitive
	 * (no existing token at that size; micro=13, small=14). */
	--isjac-font-size-help:    0.75rem;  /* 12 — brand-guide §07 form help */
	--isjac-help-font-family:  var(--isjac-font-body);
	--isjac-help-font-size:    var(--isjac-font-size-help);
	--isjac-help-line-height:  var(--isjac-line-height-base);
	--isjac-help-color:        var(--isjac-color-muted);

	/* Text input — brand-guide §07. The on-dark variants below are flipped
	 * via the surface-context selector at the bottom of this file so any
	 * input inside .isjac-band--invert / .site-footer / hero surfaces
	 * resolves to paper text on a near-transparent paper wash without a
	 * per-component override. */
	--isjac-input-font-family:        var(--isjac-font-body);
	--isjac-input-font-size:          var(--isjac-font-size-base);  /* 16 */
	--isjac-input-color:              var(--isjac-color-ink);
	--isjac-input-color-on-dark:      var(--isjac-color-paper);
	--isjac-input-bg:                 var(--isjac-surface-card);
	--isjac-input-bg-on-dark:         color-mix(in srgb, var(--isjac-color-paper) 10%, transparent);
	--isjac-input-border-color:       var(--isjac-border-default);
	--isjac-input-border-color-on-dark: color-mix(in srgb, var(--isjac-color-brand-wash) 35%, transparent);
	--isjac-input-radius:             var(--isjac-radius-sm);
	--isjac-input-focus-ring:         var(--isjac-focus-ring);
	--isjac-input-invalid-border:     var(--isjac-color-error);
	--isjac-input-invalid-ring:       0 0 0 3px color-mix(in srgb, var(--isjac-color-error) 20%, transparent);

	/* Inline alert (form error banner) — brand-guide error color via
	 * color-mix; no raw rgba in component rules. */
	--isjac-alert-error-bg:           color-mix(in srgb, var(--isjac-color-error) 8%, transparent);
	--isjac-alert-error-border:       color-mix(in srgb, var(--isjac-color-error) 25%, transparent);
	--isjac-alert-error-color:        var(--isjac-color-error);

	/* Callout card — site pattern (sub-sections with a left accent rail
	 * + title + body). Rail uses brand-deep (brand-mid is reserved for
	 * links per §A); title resolves to the h4 semantic slot so callout
	 * heads stay in the system type ramp. */
	--isjac-callout-card-rail-color:        var(--isjac-color-brand-deep);
	--isjac-callout-card-rail-width:        2px;
	--isjac-callout-card-title-font-family: var(--isjac-h4-font-family);
	--isjac-callout-card-title-font-size:   var(--isjac-h4-font-size);
	--isjac-callout-card-title-font-weight: var(--isjac-h4-font-weight);
	--isjac-callout-card-title-letter-spacing: var(--isjac-h4-letter-spacing);
	--isjac-callout-card-title-color:       var(--isjac-h4-color);
}

/* ---------- Surface context — on-dark token swap ---------- *
 * Inside any documented dark surface (invert band, site footer, hero
 * panel), the per-component on-dark variants take over. Component CSS
 * keeps reading the same token name (`--isjac-input-color`); the
 * cascade re-resolves it here based on ancestor surface. This is the
 * "surface-aware semantic token" pattern — one place to flip the brand
 * onto dark, no per-component overrides downstream.
 *
 * Add a new dark surface? Append its selector to the `:is(...)` list.
 * Add a new on-dark variant? Add both the `-on-dark` token above AND
 * the assignment here.
 */
:is(.isjac-band--invert, .site-footer, .is-style-isjac-hero, .isjac-hero) {
	--isjac-input-color:        var(--isjac-input-color-on-dark);
	--isjac-input-bg:           var(--isjac-input-bg-on-dark);
	--isjac-input-border-color: var(--isjac-input-border-color-on-dark);
}