/* =========================================================================
   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)
     ======================================================================= */
  --k-brand-blue:    #5063FF;  /* primary */
  --k-deep-blue:     #2A3EE1;  /* hover   */
  --k-navy:          #0D1265;  /* dark bg */
  --k-dark-blue:     #374785;  /* muted dark */
  --k-black:         #000000;  /* pure black (official brand manual) */
  --k-near-black:    #231F20;  /* body text (legacy) */
  --k-white:         #FFFFFF;
  --k-off-white:     #F1F1F8;  /* brand off-white (official) */
  --k-gray-50:       #F5F5F7;  /* subtle bg */
  --k-gray-200:      #E5E5EA;
  --k-gray-400:      #B4B4BE;
  --k-gray-600:      #6E6E78;

  /* Entity / accent colors (official brand manual) */
  --k-ocean:         #00A0A5;
  --k-ocean-dark:    #116E71;
  --k-ocean-darker:  #00878C;
  --k-climate:       #4C8076;
  --k-climate-dark:  #26403B;
  --k-climate-mid:   #437067;
  --k-coral:         #DB655B;  /* warm accent (official) */

  /* Overlays (on photography) */
  --k-overlay-navy:  rgba(13, 18, 101, 0.75);
  --k-overlay-blue:  rgba(80, 99, 255, 0.75);
  --k-overlay-ocean: rgba(0, 160, 165, 0.75);
  --k-overlay-black: rgba(0, 0, 0, 0.55);

  /* =======================================================================
     SEMANTIC COLOR
     ======================================================================= */
  --fg1: var(--k-near-black);        /* primary text */
  --fg2: var(--k-gray-600);          /* secondary text */
  --fg-inverse: var(--k-white);
  --fg-link: var(--k-brand-blue);
  --fg-link-hover: var(--k-deep-blue);

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

  --border-subtle:  rgba(35, 31, 32, 0.08);
  --border-default: rgba(35, 31, 32, 0.14);
  --border-strong:  rgba(35, 31, 32, 0.28);

  --focus-ring: 0 0 0 3px rgba(80, 99, 255, 0.35);

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

  --fw-light:   300;
  --fw-regular: 400;
  --fw-bold:    700;

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

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.6;
  --lh-loose:  1.8;

  --tr-tight:  -0.02em;
  --tr-normal:  0;
  --tr-wide:    0.05em;

  /* =======================================================================
     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(13, 18, 101, 0.18);

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

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

/* =========================================================================
   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-brand-blue);
  color: var(--fg-inverse);
}
.k-btn--primary:hover { background: var(--k-deep-blue); }

.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-navy);
}
.k-btn--inverse:hover { background: var(--k-gray-50); }