/* ==========================================================================
   Tenos — global design tokens + base + layout + typography roles + reveals.
   Loaded site-wide and as an editor style. Blocks CONSUME these vars; they
   must never redefine the palette (SITE-BLUEPRINT §5).

   Token names match the design HTML in /html-modules so block CSS ports
   without translation. The legacy --tn-* names are kept as aliases because
   nav/search/admin CSS and older helpers still read them.
   ========================================================================== */

:root{
  /* --- Brand colour (values from the design library tokens) --- */
  --navy:        #26339B;  /* hero / footer / careers background, logo */
  --navy-deep:   #1D2779;  /* hover state for navy surfaces */
  --ink:         #1E3096;  /* body + heading text on light backgrounds */
  --ink-strong:  #26339B;  /* eyebrows, bold headings */
  --black:       #0B0B0F;  /* pill buttons */

  /* --- Accents (flat panels, stat labels, card fills) --- */
  --cyan:        #1EC0F5;
  --green:       #00E39B;
  --yellow:      #FFD200;
  --purple:      #8A34E0;
  --pink:        #FF3D63;
  --orange:      #FF8A00;

  /* --- Surfaces --- */
  --white:       #FFFFFF;
  --grey-50:     #F4F4F5;
  --grey-100:    #E7E7EC;
  --hairline:    #C3C7E6;

  /* --- Type --- */
  --font-display: 'Plus Jakarta Sans', 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Plus Jakarta Sans', 'Poppins', 'Helvetica Neue', Arial, sans-serif;

  --step-eyebrow: 1.5375rem;
  --step-body:    1.0625rem;
  --step-lead:    1.125rem;
  --step-h3:      clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem);
  --step-h2:      clamp(1.9rem, 1.3rem + 2.4vw, 3rem);
  --step-h1:      clamp(2.4rem, 1.4rem + 3.6vw, 4rem);
  --step-hero:    clamp(2.6rem, 1.3rem + 4.4vw, 4rem);

  /* --- Layout --- */
  --container:    1920px;
  --gutter:       clamp(20px, 7vw, 128px);
  --section-y:    clamp(56px, 7vw, 112px);
  --radius-pill:  999px;

  /* --- Motion --- */
  --ease:         cubic-bezier(0.22, 0.61, 0.36, 1);
  --speed:        220ms;

  /* --- Legacy aliases (nav/search/admin css + older helpers) --- */
  --tn-blue:      var(--navy);
  --tn-blue-dark: var(--navy-deep);
  --tn-ink:       var(--ink);
  --tn-grey:      var(--grey-50);
  --tn-grey-2:    var(--grey-100);
  --tn-white:     var(--white);
  --tn-muted:     #6E76A8;
  --tn-navy:      var(--navy-deep);
  --tn-font:      var(--font-body);
  --tn-w-body:    400;
  --tn-w-btn:     700;
  --tn-w-head:    700;
  --tn-w-logo:    600;
  --tn-maxw:      var(--container);
  --tn-gutter:    var(--gutter);
  --tn-section-y: var(--section-y);
  --tn-gap:       clamp(16px, 2vw, 28px);
  --tn-radius:    0px;
  --tn-radius-lg: 0px;
  --tn-header-h:  96px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body.tn-body{
  margin:0;
  font-family:var(--font-body);
  font-weight:var(--tn-w-body);
  font-size:var(--step-body);
  line-height:1.6;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.tn-body img,.tn-body svg{max-width:100%;display:block}
.tn-body img{height:auto}
/* CDN <picture> wrappers must be layout-invisible so absolute/100% imgs behave as before */
picture{display:contents}
a{color:inherit;text-decoration:none}
.tn-body button{font-family:inherit}
.tn-main{display:block}

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

/* --- Layout helpers ------------------------------------------------------ */
.container,
.tn-container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.module{padding-block:var(--section-y)}
.tn-section{padding-top:var(--section-y)}

/* Surface variants set background AND text colour together, so a block keeps
   its contrast wherever it is moved in the page order. */
.surface-white  {background:var(--white);  color:var(--ink)}
.surface-grey   {background:var(--grey-50);color:var(--ink)}
.surface-navy   {background:var(--navy);   color:var(--white)}
.surface-green  {background:var(--green);  color:var(--navy)}
.surface-yellow {background:var(--yellow); color:var(--navy)}
.surface-cyan   {background:var(--cyan);   color:var(--navy)}
.surface-purple {background:var(--purple); color:var(--white)}
.surface-pink   {background:var(--pink);   color:var(--white)}

/* --- Typography roles (design library) ----------------------------------- */
.eyebrow{
  font-size:var(--step-eyebrow);font-weight:700;letter-spacing:0.01em;
  margin:0 0 1.75rem;
}
.surface-navy .eyebrow{color:var(--white)}

.h-hero{
  margin:0;font-family:var(--font-display);font-size:var(--step-hero);
  font-weight:700;line-height:1.02;letter-spacing:-0.02em;
}
.h-hero em{font-style:italic;font-weight:500}

.h-display{
  margin:0;font-family:var(--font-display);font-size:var(--step-h1);
  font-weight:700;line-height:1.05;letter-spacing:-0.02em;
}

.h-section{
  margin:0;font-family:var(--font-display);font-size:var(--step-h2);
  font-weight:300;line-height:1.12;letter-spacing:-0.01em;
}
.h-section--bold{font-weight:700}

.prose{max-width:46ch}
.prose>p{margin:0}
.prose>p+p{margin-top:1.25em}
.lead{font-size:var(--step-lead)}

/* Legacy heading classes (older templates + tenos_heading callers). Restyled to
   the Tenos type scale — no uppercase. */
.tn-h1,.tn-h2,.tn-h3{margin:0;font-family:var(--font-display);font-weight:var(--tn-w-head);line-height:1.05;letter-spacing:-0.02em;text-transform:none}
.tn-h1{font-size:var(--step-h1)}
.tn-h2{font-size:var(--step-h2)}
.tn-h3{font-size:var(--step-h3)}
.tn-text-blue{color:var(--navy)}
.tn-text-white{color:var(--white)}
.tn-eyebrow{font-size:var(--step-eyebrow);letter-spacing:0.01em;text-transform:none;font-weight:700;color:var(--ink-strong)}

/* generic archive fallback */
.tn-archive__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2vw,28px);margin-top:clamp(20px,3vw,32px)}
@media(max-width:1024px){.tn-archive__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.tn-archive__grid{grid-template-columns:1fr}}

/* ==========================================================================
   Scroll reveals — driven by resources/js/animations.js
   ========================================================================== */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.is-visible{opacity:1;transform:none}
.reveal-stagger>*{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.reveal-stagger.is-visible>*{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .reveal,.reveal-stagger>*{opacity:1!important;transform:none!important;transition:none!important}
}
/* editor: never sit invisible waiting for an observer */
.block-editor-block-list__layout .reveal,
.block-editor-block-list__layout .reveal-stagger>*{opacity:1!important;transform:none!important}