/* ==========================================================================
   CERTINAL DESIGN SYSTEM — tokens.css   (Certinal DS v1.1)
   --------------------------------------------------------------------------
   THE foundation. Every page loads this FIRST — it is the single file that
   controls the brand-wide look. Contents:
     · design tokens (:root)         — color / type / spacing / radius / motion
     · @property (animatable angle)
     · base reset                    — element defaults
     · container model               — Certinal 6-breakpoint widths
     · shared helpers                — .eyebrow, .titleAccent, [data-reveal]
     · buttons                       — .btn / .btn-primary / .btn-secondary
     · shared reduced-motion         — primitives every page uses

   Source of truth for token VALUES: docs/certinal-ds-wordpress-spec.html.
   Load order (see Base.astro):  tokens.css → shell.css → <page>.css
   RULE: only brand-wide primitives live here. Section- or page-specific
   rules belong in shell.css or the page's own stylesheet — never here.
   ========================================================================== */

/* ==========================================================================
   1. DESIGN TOKENS — Certinal DS (colors, type, spacing, radii, motion)
   ========================================================================== */
:root{
  /* ---- COLOR · core (Certinal) ---- */
  --lime-50:#F1FCDB; --lime-100:#E3F6BE; --lime-200:#D1ED96; --lime-300:#D4F979;
  --lime-400:#CDF757; --lime-500:#BFE655; --lime-600:#99BA35; --lime-700:#79961B;
  --lime-800:#5C7312; --lime-900:#3E4F05;
  /* ---- COLOR · brand green ramp (official "layered palette": lime → emerald) ----
     green-1 == lime-400 (the primary lime); greens 2–6 are the 5 new brand shades.
     Use for waves / gradients / decorative backgrounds — NOT as text on light surfaces
     above green-4 (too light) unless the surface is dark. */
  --green-1:#CDF757; --green-2:#A4EA5B; --green-3:#7BDC60; --green-4:#53CF64;
  --green-5:#2AC169; --green-6:#01B46D; --green-deep:#00301E;
  --n-50:#F5F7FC; --n-100:#EAEDF2; --n-200:#DBDEE3; --n-300:#C8CAD0; --n-400:#A8ABB0;
  --n-500:#87898E; --n-600:#696C71; --n-700:#4E5054; --n-800:#33353A; --n-900:#1F2024; --n-950:#141415;
  --success:#008639; --success-bg:#E0FCE5; --success-text:#006F2A;

  /* ---- COLOR · roles ---- */
  --heading:var(--n-950);
  --heading-2:var(--n-700);
  --text:var(--n-950);
  --text-secondary:var(--n-700);
  --text-muted:var(--n-600);
  --accent:var(--lime-400);
  --on-accent:var(--n-950);          /* never white on lime */
  --link:var(--lime-800);
  --border:var(--n-200);
  --bg-light:var(--n-50); --bg-dark:var(--n-950); --bg-lime:var(--lime-400);
  --surface-dark-card:#1E1F21;

  /* Tone-on-tone gradients only (Certinal rule: never across hues)
     - accent text gradient on light surfaces (readable lime range) */
  --grad-text:linear-gradient(96deg,var(--lime-700) 0%,var(--lime-800) 55%,var(--lime-900) 100%);
  --grad-fill:linear-gradient(135deg,var(--lime-300),var(--lime-400) 50%,var(--lime-500));
  --grad-strip:linear-gradient(96deg,var(--lime-300) 0%,var(--lime-400) 45%,var(--lime-500) 100%);
  /* signature brand gradients from the green ramp (tone-on-tone within the green family) */
  --grad-brand:linear-gradient(120deg,var(--green-1) 0%,var(--green-3) 46%,var(--green-6) 100%);
  --grad-wave:linear-gradient(100deg,var(--green-2) 0%,var(--green-4) 50%,var(--green-6) 100%);
  --grad-brand-soft:linear-gradient(150deg,var(--green-1),var(--green-2) 60%,var(--green-3));
  --grad-deep:linear-gradient(120deg,var(--green-5),var(--green-6) 55%,var(--green-deep));

  /* ---- TYPE ---- */
  --font:"Switzer",-apple-system,"Segoe UI",sans-serif;
  --w-primary:600; --w-secondary:500; --w-text:400; --w-button:600; --w-stat:700;
  --h1:clamp(36px, 20.5px + 2.02vw, 64px);
  --h2:clamp(30px, 20px + 1.30vw, 48px);
  --h3:clamp(25px, 17.8px + 0.94vw, 38px);
  --h4:clamp(21px, 16px + 0.65vw, 30px);
  --h5:clamp(18px, 14.7px + 0.43vw, 24px);
  --h6:clamp(15px, 12.9px + 0.28vw, 19px);
  --text-lg:clamp(17px, 15.3px + 0.22vw, 20px);
  --text-md:16px; --text-sm:14px; --text-xs:12px;
  --btn-size:15px; --menu-size:15px;
  --lh-h1:1.05; --lh-h2:1.1; --lh-h3:1.15; --lh-h4:1.2; --lh-h5:1.3; --lh-h6:1.35;
  --lh-body:1.6; --lh-sm:1.5; --lh-btn:1;

  /* ---- SPACING · 8pt ---- */
  --s-05:4px; --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:40px;
  --s-6:48px; --s-7:64px; --s-8:80px; --s-9:96px; --s-10:128px;

  /* ---- CONTAINERS (Certinal 6-breakpoint model) ---- */
  --container:1600px; --container-pad:40px;

  /* ---- RADIUS ---- */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-full:9999px;

  /* ---- MOTION (landing motion signature) ---- */
  --ease-lift:cubic-bezier(.22,.61,.36,1);      /* hover lifts, reveals   */
  --ease-nav:cubic-bezier(.16,1,.3,1);          /* navbar hide/show       */
  --ease-arrow:cubic-bezier(.65,0,.35,1);       /* CTA arrow swap         */
  --dur-hover:.28s;

  /* ---- LAYOUT vars for the two scroll set-pieces ---- */
  --reality-pin-top:max(110px,14vh);            /* pinned copy top offset */
  --card-h:max(640px,80vh);                     /* stacking deck card height */
  --nav-offset:98px;                            /* announce 30 + topbar 68 */
}

/* Registered custom property so the conic CTA border angle can animate */
@property --cta-angle{syntax:"<angle>";initial-value:0deg;inherits:false}

/* ==========================================================================
   2. BASE — element defaults
   ========================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--text);font-family:var(--font);font-size:var(--text-md);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4,h5,h6{margin:0;color:var(--heading)}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{display:block}
button{font-family:var(--font);cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}

/* ==========================================================================
   3. CONTAINER — Certinal container behavior across the 6 breakpoints
   ========================================================================== */
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--container-pad)}
@media (max-width:1919px){:root{--container:1440px;--container-pad:40px}}
@media (max-width:1599px){:root{--container:1140px;--container-pad:40px}}
@media (max-width:1199px){:root{--container:960px;--container-pad:30px}}
@media (max-width:1023px){:root{--container:720px;--container-pad:20px}}
@media (max-width:767px){:root{--container:100%;--container-pad:20px}}
/* below 768px the fixed nav is shorter — keep the layout offset token in sync */
@media (max-width:768px){:root{--nav-offset:78px}}

/* ==========================================================================
   4. SHARED HELPERS
   ========================================================================== */
.eyebrow{font-size:var(--text-xs);font-weight:var(--w-primary);letter-spacing:.2em;text-transform:uppercase;color:var(--lime-800);margin:0 0 var(--s-2)}
.titleAccent{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}
/* gradient-AS-text using the brand ramp, kept in the readable-dark range for LIGHT surfaces */
.titleAccentBrand{background:linear-gradient(96deg,var(--green-5),var(--green-6) 55%,var(--green-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
/* Wavy brand gradient BACKGROUND — OPT-IN only. Contrast rule: light wave → DARK text;
   deep wave → LIGHT text. Never place behind long body copy (visibility). */
.waveBg{background:var(--grad-wave)}                  /* light-green wave · pair with dark text */
.waveBg-soft{background:var(--grad-brand-soft)}       /* gentle lime→green · dark text */
.waveBg-deep{background:var(--grad-deep);color:#fff}  /* emerald · light text (deep green, not lime) */

/* ---- pattern-bloom MOTION (opt-in per surface; applied only under no-preference).
   Uses the independent scale/translate/rotate properties so it never clobbers an
   element's own `transform` (e.g. translateY(-50%) centering). ---- */
@keyframes certBreathe{0%,100%{scale:1}50%{scale:1.055}}
@keyframes certDrift{0%,100%{translate:0 0}50%{translate:0 -14px}}
@keyframes certSpin{to{rotate:360deg}}

/* reveal-on-scroll: JS adds .is-in; elements start hidden via [data-reveal] */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease-lift),transform .7s var(--ease-lift)}
[data-reveal].is-in{opacity:1;transform:none}

/* ==========================================================================
   5. BUTTONS — Certinal spec: semibold 600 · 15px · radius 10 · 14/24
   ========================================================================== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:var(--w-button);font-size:var(--btn-size);line-height:var(--lh-btn);padding:14px 24px;border-radius:var(--r-sm);border:1.5px solid transparent;transition:transform .2s var(--ease-lift),box-shadow .2s var(--ease-lift),background .2s,border-color .2s}
.btn-primary{background:var(--lime-400);color:var(--n-950);box-shadow:0 12px 30px rgba(121,150,27,.28)}
.btn-primary:hover{background:var(--lime-500);transform:translateY(-2px);box-shadow:0 18px 40px rgba(121,150,27,.38)}
.btn-secondary{background:transparent;color:var(--n-950);border-color:var(--n-300)}
.btn-secondary:hover{border-color:var(--n-700);transform:translateY(-1px)}

/* ==========================================================================
   6. REDUCED MOTION — shared primitives (page files add their own on top)
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  [data-reveal]{transition:none;opacity:1;transform:none}
  *{scroll-behavior:auto}
}