/* ---------------------------------------------------------------------------
 * Jacky Brand V2 design tokens.
 * Concatenated VERBATIM from ../tokens/*.css — this is the single sync point.
 * If a token changes in ../tokens/, re-run the concat rather than hand-editing.
 * ------------------------------------------------------------------------ */

/* ===== tokens/fonts.css ===== */
/* Poppins is loaded from Google Fonts — no font binaries were supplied with the
   V2 style guide. If licensed Poppins files exist, drop the .woff2 into
   assets/fonts/ and replace this @import with @font-face rules. */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");

/* ===== tokens/colors.css ===== */
:root{
  /* --- base palette --- */
  --cream-50:#FAF9F6;
  --white:#FFFFFF;
  --grey-100:#F3F4F6;
  --grey-300:#DDDFE2;
  --grey-400:#D2D4D6;
  --grey-500:#8E9196;
  --grey-600:#697384;
  --grey-700:#555D6B;
  --ink-900:#161616;
  --ink-950:#141413;

  /* --- accent: sky blue (V2 replaced V1 lime #D4F53C) --- */
  --sky-300:#B9F4FF;
  --sky-200:#D2F8FF;
  --sky-100:#EAFCFF;
  --sky-400:#A6EFFC;
  --sky-600:#0384B5;
  --sky-700:#0284C7;

  /* --- signal --- */
  --gold-400:#facc15;
  --red-500:#CF4043;

  /* --- semantic surfaces --- */
  --bg-base:var(--cream-50);
  --bg-white:var(--white);
  --bg-alt:var(--grey-100);
  --bg-contrast:var(--ink-950);
  --surface-card:var(--white);
  --surface-field:var(--grey-100);

  /* --- semantic text --- */
  --text-primary:var(--ink-900);
  --text-muted:var(--grey-600);
  --text-muted-soft:var(--grey-500);
  --text-eyebrow:var(--grey-700);
  --text-on-contrast:var(--cream-50);
  --text-on-accent:var(--ink-900);

  /* --- semantic accent / line --- */
  --accent:var(--sky-300);
  --accent-variant:var(--sky-200);
  --accent-hover:var(--sky-400);
  --accent-wash:var(--sky-100);
  /* readable deep blue for text and marks on light surfaces — the accent itself fails contrast */
  --accent-ink:var(--sky-700);
  /* accent-tinted elevation, for lifts on sky surfaces */
  --shadow-accent:0 12px 26px -16px rgba(3,132,181,0.6);
  --shadow-accent-sm:0 10px 22px -14px rgba(3,132,181,0.62);
  --accent-line:rgba(3,132,181,0.18);
  --accent-glow:rgba(3,132,181,0.09);
  --shadow-accent-lg:0 14px 30px -14px rgba(3,132,181,0.7);
  --shadow-accent-rest:0 18px 40px -28px rgba(3,132,181,0.55);
  --accent-track:rgba(3,132,181,0.16);
  --hatch-line:#EDEEF1;
  --border:var(--grey-300);
  --border-strong:var(--grey-400);
  --star:var(--gold-400);
  --error:var(--red-500);
}

/* ===== tokens/typography.css ===== */
:root{
  --font-sans:'Poppins', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-body:var(--font-sans);
  --font-display:var(--font-sans);

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

  --text-h1-size:63px;
  --text-h1-weight:var(--weight-bold);
  --text-h1-tracking:-1.8px;
  --text-h1-leading:1.05;

  --text-h2-size:37px;
  --text-h2-weight:var(--weight-semibold);
  --text-h2-tracking:0px;
  --text-h2-leading:1.15;

  --text-h3-size:24px;
  --text-h3-weight:var(--weight-semibold);
  --text-h3-leading:1.25;

  --text-body-size:18px;
  --text-body-weight:var(--weight-regular);
  --text-body-leading:1.7;

  --text-small-size:14px;
  --text-small-leading:1.6;

  --text-eyebrow-size:14px;
  --text-eyebrow-weight:var(--weight-medium);
  --text-eyebrow-tracking:1.4px;
  --text-eyebrow-transform:uppercase;

  --text-button-size:16px;
  --text-button-weight:var(--weight-medium);
}

/* ===== tokens/spacing.css ===== */
:root{
  --space-1:4px;
  --space-2:6px;
  --space-3:8px;
  --space-4:10px;
  --space-5:12px;
  --space-6:16px;
  --space-7:20px;
  --space-8:24px;
  --space-9:32px;
  --space-10:40px;
  --space-11:48px;
  --space-12:56px;
  --space-13:72px;
  --space-14:96px;
  --space-15:120px;

  --container-max:1440px;
  --container-gutter:24px;
  --section-padding-y:120px;
  --section-padding-y-compact:72px;

  --card-padding:44px;
  --card-padding-compact:32px;
  --button-padding:22px 56px;
  --button-padding-sm:14px 32px;
  --field-padding:14px 18px;
}

/* ===== tokens/shape.css ===== */
:root{
  --radius-lg:16px;
  --radius-sm:12px;
  --radius-xs:8px;
  --radius-pill:9999px;

  /* V2 removes borders: surfaces separate by background contrast.
     These remain only for dividers and inactive states. */
  --border-width:1px;
  --divider:1px solid var(--border);

  /* Elevation is nearly flat. */
  --shadow-none:none;
  --shadow-soft:0 1px 2px rgba(20,20,19,0.04);
  --shadow-lift:0 12px 32px rgba(20,20,19,0.08);
}

/* ===== tokens/motion.css ===== */
:root{
  --dur-fast:150ms;
  --dur-base:300ms;
  --dur-slow:600ms;
  --dur-draw:700ms;
  --ease-out:cubic-bezier(0.16,1,0.3,1);
  --ease-inout:cubic-bezier(0.4,0,0.2,1);
  --reveal-distance:24px;
  --reveal-stagger:70ms;
  --press-scale:0.98;
  --hover-lift:-2px;
}

@keyframes ds-reveal{
  from{opacity:0;transform:translateY(24px);}
  to{opacity:1;transform:none;}
}

@keyframes ds-marquee{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}
}

@keyframes ds-ping{
  0%{transform:scale(1);opacity:0.7;}
  70%{transform:scale(2.6);opacity:0;}
  100%{transform:scale(2.6);opacity:0;}
}

@keyframes ds-draw{
  from{stroke-dashoffset:var(--draw-length,400);}
  to{stroke-dashoffset:0;}
}

@keyframes ds-flip-in{
  from{opacity:0;transform:rotateX(88deg);}
  to{opacity:1;transform:rotateX(0deg);}
}

@keyframes ds-flip-out{
  from{opacity:1;transform:rotateX(0deg);}
  to{opacity:0;transform:rotateX(-88deg);}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}

@keyframes ds-wave{
  0%,60%,100%{transform:rotate(0deg);}
  10%{transform:rotate(14deg);}
  20%{transform:rotate(-8deg);}
  30%{transform:rotate(14deg);}
  40%{transform:rotate(-4deg);}
  50%{transform:rotate(10deg);}
}