/* =========================================================================
   Katapult Design System — colors & type
   ========================================================================= */

@font-face {
  font-family: 'Px Grotesk';
  src: url('assets/fonts/px-grotesk/Px-Grotesk-Light.woff2') format('woff2');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Px Grotesk';
  src: url('assets/fonts/px-grotesk/Px-Grotesk-Regular.woff2') format('woff2');
  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');
  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');
  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');
  font-weight: 700; font-style: italic; font-display: swap;
}

:root {
  /* COLOR — raw palette */
  --k-brand-blue:    #5063FF;
  --k-deep-blue:     #2A3EE1;
  --k-navy:          #0D1265;
  --k-dark-blue:     #374785;
  --k-black:         #000000;
  --k-near-black:    #231F20;
  --k-white:         #FFFFFF;
  --k-off-white:     #F1F1F8;
  --k-gray-50:       #F5F5F7;
  --k-gray-200:      #E5E5EA;
  --k-gray-400:      #B4B4BE;
  --k-gray-600:      #6E6E78;

  /* Entity accent colors */
  --k-ocean:         #00A0A5;
  --k-climate:       #4C8076;
  --k-coral:         #DB655B;

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

  --bg1:            var(--k-white);
  --bg2:            var(--k-gray-50);
  --bg-dark:        var(--k-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 */
  --font-sans:   'Px Grotesk', Helvetica, Arial, sans-serif;
  --fw-light:    300;
  --fw-regular:  400;
  --fw-bold:     700;

  /* SPACING, RADIUS, SHADOW, MOTION */
  --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);

  --ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:   150ms;
  --dur-base:   240ms;

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

/* Base */
body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--fg1);
  background: var(--bg1);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Buttons */
.k-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 1rem;
  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-off-white); }