/*
 * kx-tokens: the Kairos design tokens, the .kx scope reset and the shared primitives
 * (shell, eyebrow, headings, pill buttons). Mirrors src/app/globals.css in the
 * GraniteDigital/pros-kairos design repo. Change values here, not in widgets.
 * Nothing in this file reads Elementor global colours or fonts on purpose.
 */

/* ---------- HEX Franklin Variable (brand family, from the design repo) ---------- */
@font-face {
  font-family: "HEX Franklin";
  src: url("../fonts/HEXFranklin-Variable.woff2") format("woff2-variations"),
       url("../fonts/HEXFranklin-Variable.woff2") format("woff2");
  font-weight: 1 1000;
  font-stretch: 60% 120%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* colour (brand guidance p7) */
  --kx-navy: #04314b;
  --kx-navy-deep: #022638;
  --kx-navy-mid: #034d73;
  --kx-blue: #0d7cb6;           /* decorative/brand fills; use --kx-blue-ink for text */
  --kx-blue-ink: #0a618f;       /* AA-safe text blue: 4.5:1 even on the palest Kai glass */
  --kx-sky: #01aefe;
  --kx-orange: #ff5b06;
  --kx-green: #b8f64d;          /* Kairos Green: a signal, never a general accent */
  --kx-green-hover: #c8ff62;
  --kx-dot-core: #b8f64d;
  --kx-dot-edge: #93f047;
  --kx-paper: #ffffff;
  --kx-paper-soft: #f6f9fb;
  --kx-paper-tint: #eef4f8;
  --kx-line: #dbe6ee;
  --kx-line-soft: #eaf1f6;
  --kx-ink: #04314b;
  --kx-ink-muted: #435f73;       /* WCAG AA: was #47647a (4.3:1 on the Kai glass cards) */
  --kx-ink-faint: #627483;       /* WCAG AA: was #7d94a6 (3.1:1 on white) */
  --kx-on-navy: #ffffff;
  --kx-on-navy-muted: #a9c3d4;
  --kx-on-navy-faint: #7a99ae;  /* was #6d8da3 (3.87:1 on navy); 4.52:1 so 11px utility links pass AA (tracker L7) */

  /* type */
  --kx-font-sans: "HEX Franklin", "Franklin Gothic", "Helvetica Neue", Arial, sans-serif;
  --kx-text-hero: clamp(2.25rem, 4.05vw, 3.875rem);
  --kx-text-mega: clamp(3.25rem, 9.5vw, 10.5rem);
  --kx-text-display: clamp(2.75rem, 6.6vw, 6.5rem);
  --kx-text-page-hero: clamp(2.125rem, 5.8vw, 5.5rem);
  --kx-text-pillar: clamp(1.875rem, 3.85vw, 3.9rem);
  --kx-text-h1: clamp(2.375rem, 4.8vw, 4.5rem);
  --kx-text-h2: clamp(1.875rem, 3.4vw, 3.25rem);
  --kx-text-h3: clamp(1.5rem, 2.2vw, 2.125rem);
  --kx-text-h4: clamp(1.25rem, 1.5vw, 1.5rem);
  --kx-text-lead: clamp(1.0625rem, 1.25vw, 1.375rem);
  --kx-text-body: 1.0625rem;
  --kx-text-small: 0.9375rem;
  --kx-text-label: 0.75rem;

  /* layout */
  --kx-gutter: clamp(1.25rem, 4vw, 4rem);
  --kx-shell: 90rem;
  --kx-shell-narrow: 68rem;
  --kx-space-section: clamp(3.875rem, 7.7vw, 7.75rem); /* -30% per client feedback 7 Oct (was clamp(5.5rem, 11vw, 11rem)) */
  --kx-space-section-lg: clamp(4.875rem, 10.5vw, 10.5rem); /* -30% (was clamp(7rem, 15vw, 15rem)) */
  --kx-header-h: 4.25rem;
  --kx-header-h-lg: 6.5rem;

  /* motion */
  --kx-ease-kairos: cubic-bezier(0.22, 1, 0.36, 1);   /* anything arriving */
  --kx-ease-signal: cubic-bezier(0.65, 0, 0.35, 1);   /* state changes */
  --kx-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --kx-duration-fast: 260ms;
  --kx-duration-base: 420ms;
  --kx-duration-slow: 720ms;
  --kx-duration-reveal: 1100ms;
}

/* ---------- .kx scope: isolate Kairos output from the kit and theme CSS ---------- */
.kx, .kx *, .kx *::before, .kx *::after { box-sizing: border-box; }
.kx {
  font-family: var(--kx-font-sans);
  font-size: var(--kx-text-body);
  line-height: 1.6;
  color: var(--kx-ink);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.kx h1, .kx h2, .kx h3, .kx h4, .kx h5, .kx h6, .kx p, .kx dl, .kx dd, .kx dt, .kx ul, .kx ol, .kx figure, .kx blockquote, .kx hr {
  margin: 0; padding: 0; font: inherit; color: inherit; border: 0;
}
.kx ul, .kx ol { list-style: none; }
.kx img, .kx svg, .kx video { display: block; max-width: 100%; height: auto; }
.kx a { color: inherit; text-decoration: none; font-family: inherit; letter-spacing: inherit; }
.kx button, .kx select { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.kx ::selection { background: var(--kx-green); color: var(--kx-navy); }
.kx :focus-visible { outline: 2px solid var(--kx-green); outline-offset: 3px; border-radius: 2px; }
.kx .kx-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- section chrome ---------- */
.kx.kx-section { position: relative; padding-block: var(--kx-space-section); overflow: hidden; }
.kx.kx-section--space-large { padding-block: var(--kx-space-section-lg); }
.kx.kx-section--space-none { padding-block: 0; }
.kx.kx-section--light { background: var(--kx-paper); }
.kx.kx-section--tint { background: var(--kx-paper-soft); }
.kx.kx-section--dark, .kx-on-navy {
  --kx-ink: var(--kx-on-navy);
  --kx-ink-muted: var(--kx-on-navy-muted);
  --kx-ink-faint: var(--kx-on-navy-faint);
  --kx-line: rgb(255 255 255 / 0.12);
  color: var(--kx-ink);
}
.kx.kx-section--dark { background: var(--kx-navy); }
.kx .kx-shell { width: 100%; max-width: var(--kx-shell); padding-inline: var(--kx-gutter); margin-inline: auto; }
.kx .kx-shell--narrow { max-width: var(--kx-shell-narrow); }

/* ---------- type roles (the house voice) ---------- */
.kx .kx-eyebrow {
  display: inline-flex; align-items: center; gap: 0.625rem;
  font-size: var(--kx-text-label); letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; line-height: 1; color: var(--kx-ink-muted);
}
.kx .kx-eyebrow .kx-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: radial-gradient(circle, var(--kx-dot-core) 55%, var(--kx-dot-edge) 100%); }
/* The kit's custom CSS forces `* h1..h6 { font-weight: normal !important }` site-wide (an iOS fix for the
   old static Franklin faces). HEX Franklin is variable and font-synthesis is off, so Kairos headings opt back out. */
.kx .kx-heading { font-weight: 700 !important; color: var(--kx-ink); font-stretch: 100%; text-wrap: pretty; } /* pretty, not balance: breaks like the design and only pulls a word down to avoid a single-word last line (Andre, 5 Oct). Balance re-split headings with <br> lines ("Intelligence to / know.", Andre, 8 Oct) */
.kx .kx-heading--mega     { font-size: var(--kx-text-mega);     line-height: 0.88; letter-spacing: -0.035em; }
.kx .kx-heading--display  { font-size: var(--kx-text-display);  line-height: 0.94; letter-spacing: -0.03em; }
.kx .kx-heading--hero     { font-size: var(--kx-text-hero);     line-height: 0.96; letter-spacing: -0.032em; }
.kx .kx-heading--page-hero{ font-size: var(--kx-text-page-hero);line-height: 0.94; letter-spacing: -0.03em; } /* as PlatformHero.tsx; without it "Intelligence to know." overflowed and wrapped (8 Oct) */
.kx .kx-heading--pillar   { font-size: var(--kx-text-pillar);   line-height: 0.96; }
.kx .kx-heading--h1 { font-size: var(--kx-text-h1); line-height: 0.98; letter-spacing: -0.028em; }
.kx .kx-heading--h2 { font-size: var(--kx-text-h2); line-height: 1.04; letter-spacing: -0.024em; }
.kx .kx-heading--h3 { font-size: var(--kx-text-h3); line-height: 1.12; letter-spacing: -0.018em; font-weight: 600 !important; }
.kx .kx-heading--h4 { font-size: var(--kx-text-h4); line-height: 1.25; letter-spacing: -0.012em; font-weight: 600 !important; }
.kx .kx-mega  { font-size: var(--kx-text-mega); letter-spacing: -0.035em; font-weight: 700; line-height: 0.88; font-variant-numeric: tabular-nums; }
.kx .kx-lead  { font-size: var(--kx-text-lead); line-height: 1.5; letter-spacing: -0.006em; color: var(--kx-ink-muted); }
.kx .kx-intro { font-size: var(--kx-text-body); line-height: 1.625; color: var(--kx-ink-muted); }
.kx .kx-small { font-size: var(--kx-text-small); line-height: 1.625; color: var(--kx-ink-muted); }
.kx .kx-optical-left { margin-left: -0.055em; }

.kx .kx-section__header { max-width: 52rem; margin-inline: auto; text-align: center; display: grid; gap: 1.5rem; }
.kx .kx-section__header .kx-intro { max-width: 40rem; margin-inline: auto; }
.kx .kx-section__header--left { margin-inline: 0; text-align: left; }
.kx .kx-section__header--left .kx-intro { margin-inline: 0; }
.kx .kx-section__header .kx-eyebrow { justify-self: center; }
.kx .kx-section__header--left .kx-eyebrow { justify-self: start; }

/* green signal rule used across sections */
.kx .kx-rule { display: block; width: 3rem; height: 3px; border-radius: 999px; background: var(--kx-green); }

/* ---------- pill buttons (ui/Button.tsx) ---------- */
.kx .kx-btn {
  display: inline-flex; align-items: center; gap: 0.625rem;
  border-radius: 999px; font-weight: 600; white-space: nowrap;
  padding: 0.875rem 1.75rem; font-size: 0.9375rem; line-height: 1.6;
  border: 1px solid transparent;
  transition: color var(--kx-duration-base) var(--kx-ease-soft), background-color var(--kx-duration-base) var(--kx-ease-soft), border-color var(--kx-duration-base) var(--kx-ease-soft);
}
.kx .kx-btn--sm { padding: 0.625rem 1.25rem; font-size: 0.875rem; }
.kx .kx-btn--green { background: var(--kx-green); color: var(--kx-navy); }
.kx .kx-btn--green:hover { background: var(--kx-green-hover); }
.kx .kx-btn--navy { background: var(--kx-navy); color: #fff; }
.kx .kx-btn--navy:hover { background: var(--kx-navy-mid); }
.kx .kx-btn--outline { background: transparent; color: var(--kx-navy); border-color: rgb(4 49 75 / 0.25); }
.kx .kx-btn--outline:hover { background: var(--kx-navy); border-color: var(--kx-navy); color: #fff; }
.kx .kx-btn--outline-light { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.35); }
.kx .kx-btn--outline-light:hover { background: #fff; border-color: #fff; color: var(--kx-navy); }
.kx .kx-btn svg { width: 16px; height: 10px; flex: none; transition: transform var(--kx-duration-base) var(--kx-ease-kairos); }
.kx .kx-btn:hover svg { transform: translateX(0.25rem); }

@media (prefers-reduced-motion: reduce) {
  .kx *, .kx *::before, .kx *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}
.kx .kx-btn--white { background: #fff; color: var(--kx-navy); }
.kx .kx-btn--white:hover { background: var(--kx-green); }

/* ---------- motion support (globals.css) ---------- */
[data-kx-reveal] { will-change: transform, opacity; }
.split-line { padding-bottom: 0.2em; }
.split-line-mask { margin-bottom: -0.2em; }
.kx .kx-wave { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.kx .kx-wave__band { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; }
@media (min-width: 640px) { .kx .kx-wave__band { filter: blur(110px); } }
.kx .kx-wavefield { pointer-events: none; overflow: hidden; }
.kx .kx-app__wave.kx-wavefield { overflow: visible; } /* the 42px blur must bleed past the layer's 62% edge, as in KairosApp.tsx; clipped it drew a hard line above the greeting copy (Andre, 8 Oct) */
.kx .kx-wavefield svg { display: block; width: 100%; height: 100%; }
/* notes for editors, printed only inside the Elementor preview */
.kx .kx-editor-note { max-width: 36ch; margin: auto; padding: 0.625rem 0.875rem; border: 1px dashed var(--kx-ink-faint); border-radius: 0.5rem; font-size: 0.8125rem; line-height: 1.5; color: var(--kx-ink-muted); background: rgb(255 255 255 / 0.7); text-align: center; }
.kx .kx-guilloche { pointer-events: none; }
.kx .kx-guilloche svg { width: 100%; height: 100%; display: block; }
.kx .kx-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--kx-dot-core) 0%, var(--kx-dot-core) 32%, var(--kx-dot-edge) 100%); }

/* marquee */
@keyframes kx-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-100%,0,0); } }
.kx .kx-marquee { mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); }
.kx .kx-marquee__track { animation: kx-marquee 46s linear infinite; }
.kx .kx-marquee:hover .kx-marquee__track { animation-play-state: paused; }

/* glass edge */
.kx .kx-glass-edge { position: relative; }
.kx .kx-glass-edge::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: var(--glass-edge-w, 1px); z-index: 1; pointer-events: none;
  background: linear-gradient(var(--glass-edge-angle, 135deg), rgb(255 255 255 / 0.95) 0%, rgb(255 255 255 / 0.55) 14%, rgb(255 255 255 / 0.12) 38%, rgb(255 255 255 / 0.08) 56%, rgb(255 255 255 / 0.45) 80%, rgb(255 255 255 / 0.9) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.kx .kx-glass-edge > * { position: relative; z-index: 2; }

@media (prefers-reduced-motion: reduce) { [data-kx-reveal] { opacity: 1 !important; transform: none !important; } .kx .kx-marquee__track { animation: none; } }