/* =========================================================================
   Katapult Design System — colors & type
   Single-file foundation: tokens + @font-face + semantic styles
   ========================================================================= */

/* -------------------------------------------------------------------------
   @font-face — Px Grotesk (primary, per official brand manual)
                Roboto (body/fallback, per official brand manual)
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Px Grotesk';
  src: url('assets/fonts/px-grotesk/Px-Grotesk-Light.woff2') format('woff2'),
       url('assets/fonts/px-grotesk/Px-Grotesk-Light.woff') format('woff'),
       url('assets/fonts/px-grotesk/PxGrotesk-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Px Grotesk';
  src: url('assets/fonts/px-grotesk/PxGrotesk-LightItalic.otf') format('opentype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Px Grotesk';
  src: url('assets/fonts/px-grotesk/Px-Grotesk-Regular.woff2') format('woff2'),
       url('assets/fonts/px-grotesk/Px-Grotesk-Regular.woff') format('woff'),
       url('assets/fonts/px-grotesk/PxGrotesk-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Px Grotesk';
  src: url('assets/fonts/px-grotesk/Px-Grotesk-Italic.woff2') format('woff2'),
       url('assets/fonts/px-grotesk/Px-Grotesk-Italic.woff') format('woff'),
       url('assets/fonts/px-grotesk/PxGrotesk-RegularItalic.otf') format('opentype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Px Grotesk';
  src: url('assets/fonts/px-grotesk/Px-Grotesk-Bold.woff2') format('woff2'),
       url('assets/fonts/px-grotesk/Px-Grotesk-Bold.woff') format('woff'),
       url('assets/fonts/px-grotesk/PxGrotesk-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Px Grotesk';
  src: url('assets/fonts/px-grotesk/Px-Grotesk-Bold-Italic.woff2') format('woff2'),
       url('assets/fonts/px-grotesk/Px-Grotesk-Bold-Italic.woff') format('woff'),
       url('assets/fonts/px-grotesk/PxGrotesk-BoldItalic.otf') format('opentype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Px Grotesk Screen';
  src: url('assets/fonts/px-grotesk/PxGrotesk-Screen.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('assets/fonts/roboto/Roboto-Variable.ttf') format('truetype-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* =======================================================================
     COLOR — raw palette (hex)
     ======================================================================= */
  /* --- MAIN COLORS --- */
  --k-indigo:        #202471;  /* main / darkest — dark bands, footer, text */
  --k-ocean:         #00A0A5;  /* main */
  --k-climate:       #4C8076;  /* main */

  /* --- ACCENT --- */
  --k-accent:        #5063FF;  /* CTAs, links, highlights */
  --k-accent-hover:  #3A4CE6;  /* derived hover for the accent */

  /* --- BACKGROUNDS --- */
  --k-white:         #FFFFFF;
  --k-off-white:     #F1F1F8;

  /* --- SUPPORT (derived; not part of the core palette) --- */
  --k-ocean-dark:    #116E71;
  --k-climate-dark:  #26403B;
  --k-gray-200:      #E1E1EC;
  --k-gray-400:      #A9A9BC;
  --k-gray-600:      #666C8F;

  /* Aliases kept so existing code keeps working */
  --k-brand-blue:    var(--k-accent);
  --k-deep-blue:     var(--k-accent-hover);
  --k-navy:          var(--k-indigo);
  --k-gray-50:       var(--k-off-white);

  /* Overlays (on photography) */
  --k-overlay-navy:  rgba(32, 36, 113, 0.75);
  --k-overlay-blue:  rgba(80, 99, 255, 0.75);
  --k-overlay-ocean: rgba(0, 160, 165, 0.75);

  /* =======================================================================
     SEMANTIC COLOR
     ======================================================================= */
  --fg1: var(--k-indigo);            /* primary text */
  --fg2: var(--k-gray-600);          /* secondary text */
  --fg-inverse: var(--k-white);
  --fg-link: var(--k-accent);
  --fg-link-hover: var(--k-accent-hover);

  --bg1: var(--k-white);              /* page */
  --bg2: var(--k-off-white);          /* subtle section */
  --bg-dark: var(--k-indigo);         /* dark section */
  --bg-dark-overlay: var(--k-overlay-navy);

  --border-subtle:  rgba(32, 36, 113, 0.10);
  --border-default: rgba(32, 36, 113, 0.16);
  --border-strong:  rgba(32, 36, 113, 0.30);

  --focus-ring: 0 0 0 3px rgba(80, 99, 255, 0.35); /* @kind shadow */

  /* =======================================================================
     TYPE — families, weights, scale
     ======================================================================= */
  --font-sans:     'Px Grotesk', 'Roboto', Helvetica, Arial, sans-serif;
  --font-fallback: 'Roboto', Helvetica, Arial, sans-serif;

  --fw-light:   300; /* @kind other */
  --fw-regular: 400; /* @kind other */
  --fw-bold:    700; /* @kind other */

  /* Fluid scale (clamp) — mobile-first */
  --fs-xs:    clamp(0.75rem,  0.7rem + 0.2vw,  0.875rem); /* @kind other */
  --fs-sm:    clamp(0.875rem, 0.82rem + 0.3vw, 1rem); /* @kind other */
  --fs-base:  clamp(1rem,     0.95rem + 0.3vw, 1.125rem); /* @kind other */
  --fs-lg:    clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem); /* @kind other */
  --fs-xl:    clamp(1.25rem,  1.1rem + 0.7vw,  1.5rem); /* @kind other */
  --fs-2xl:   clamp(1.5rem,   1.2rem + 1.5vw,  2rem); /* @kind other */
  --fs-3xl:   clamp(2rem,     1.5rem + 2.5vw,  2.75rem); /* @kind other */
  --fs-4xl:   clamp(2.5rem,   1.8rem + 3.5vw,  4rem); /* @kind other */
  --fs-hero:  clamp(2.75rem,  2rem + 4vw,      5rem); /* @kind other */

  --lh-tight:  1.15; /* @kind other */
  --lh-snug:   1.3; /* @kind other */
  --lh-normal: 1.6; /* @kind other */
  --lh-loose:  1.8; /* @kind other */

  --tr-tight:  -0.02em; /* @kind other */
  --tr-normal:  0; /* @kind other */
  --tr-wide:    0.05em; /* @kind other */

  /* =======================================================================
     SPACING, RADIUS, SHADOW, MOTION
     ======================================================================= */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem;
  --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem; --sp-32: 8rem;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  --shadow-card:       0 2px 12px rgba(0, 0, 0, 0.08);
  --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.14);
  --shadow-lift:       0 16px 48px rgba(32, 36, 113, 0.18);

  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:  150ms; /* @kind other */
  --dur-base:  240ms; /* @kind other */
  --dur-slow:  420ms; /* @kind other */

  --max-w-content: 720px; /* @kind spacing */
  --max-w-wide:    1200px; /* @kind spacing */
  --gutter:        clamp(1rem, 5vw, 2rem); /* @kind spacing */
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES (opt-in; base resets on body)
   ========================================================================= */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg1);
  background: var(--bg1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.k-hero {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  text-wrap: balance;
}
.k-h1 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  text-wrap: balance;
}
.k-h2 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-tight);
  text-wrap: balance;
}
.k-h3 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-tight);
}
.k-h4 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}
.k-eyebrow {
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
  color: var(--fg2);
}
.k-lead {
  font-weight: var(--fw-regular);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--fg2);
  text-wrap: pretty;
}
.k-body {
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg1);
}
.k-small {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg2);
}

.k-link {
  color: var(--fg-link);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur-fast) var(--ease-out);
}
.k-link:hover { color: var(--fg-link-hover); }

/* Reusable button classes */
.k-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  line-height: 1;
  padding: 0.875rem 1.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.k-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.k-btn:active { transform: translateY(1px); }

.k-btn--primary {
  background: var(--k-accent);
  color: var(--fg-inverse);
}
.k-btn--primary:hover { background: var(--k-accent-hover); }

.k-btn--ghost {
  background: transparent;
  color: var(--fg1);
  border-color: var(--border-strong);
}
.k-btn--ghost:hover { border-color: var(--fg1); background: var(--bg2); }

.k-btn--inverse {
  background: var(--k-white);
  color: var(--k-indigo);
}
.k-btn--inverse:hover { background: var(--k-off-white); }