/* =============================================================
   11point2 — Design Tokens
   Colour, type, spacing, motion. Single source of truth.
   ============================================================= */

@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-Thin.ttf")           format("truetype"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-ThinItalic.ttf")     format("truetype"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-ExtraLight.ttf")     format("truetype"); font-weight: 200; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-ExtraLightItalic.ttf") format("truetype"); font-weight: 200; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-Light.ttf")          format("truetype"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-LightItalic.ttf")    format("truetype"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-Regular.ttf")        format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-Italic.ttf")         format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-Medium.ttf")         format("truetype"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-MediumItalic.ttf")   format("truetype"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-SemiBold.ttf")       format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-SemiBoldItalic.ttf") format("truetype"); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-Bold.ttf")           format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-BoldItalic.ttf")     format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-ExtraBold.ttf")      format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-ExtraBoldItalic.ttf") format("truetype"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-Black.ttf")          format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("./fonts/Poppins-BlackItalic.ttf")    format("truetype"); font-weight: 900; font-style: italic; font-display: swap; }

:root {
  /* ---- CORE PALETTE (from brand guide) ---- */
  --lp2-ink:        #292929;  /* 1. Dark Grey  — primary text, primary surface */
  --lp2-ash:        #ede9e5;  /* 2. Light Grey — neutral surface */
  --lp2-paper:      #ffffff;  /* 3. White      — primary background, negative space */
  --lp2-orange:     #ee702e;  /* 4. Orange     — primary accent (escape velocity) */
  --lp2-yellow:     #efab0b;  /* 5. Yellow     — supporting accent */
  --lp2-red:        #fb2300;  /* 6. Red        — supporting accent, alerts */
  --lp2-pink:       #ff9ec8;  /* 7. Pink       — supporting accent, soft */

  /* ---- ORANGE GRADIENT (logo signature) ---- */
  --lp2-orange-a:   #ee982e;  /* lighter end (top-left of logo) */
  --lp2-orange-b:   #ee702e;  /* core orange */
  --lp2-orange-c:   #fb2300;  /* deepest end (bottom-right of pink ring) */
  --lp2-grad-launch: linear-gradient(115deg, var(--lp2-orange-a) 0%, var(--lp2-orange-b) 50%, var(--lp2-orange-c) 100%);
  --lp2-grad-warm:   linear-gradient(115deg, var(--lp2-yellow) 0%, var(--lp2-orange-b) 60%, var(--lp2-red) 100%);

  /* ---- TINTS (for backgrounds, hovers, illustrations) ---- */
  --lp2-orange-50:  #fdf1eb;
  --lp2-orange-100: #fbdcc8;
  --lp2-orange-200: #f7b78a;
  --lp2-orange-300: #f18d58;
  --lp2-yellow-50:  #fdf7e7;
  --lp2-yellow-200: #f7d97a;
  --lp2-pink-50:    #fee2ec;
  --lp2-pink-200:   #fdc4d8;
  --lp2-red-50:     #fde0d9;
  --lp2-ink-80:     #545454;
  --lp2-ink-60:     #7c7c7c;
  --lp2-ink-40:     #a8a8a8;
  --lp2-ink-20:     #d4d4d4;
  --lp2-ash-deep:   #d9d4cf;

  /* ---- SEMANTIC ALIASES ---- */
  --color-bg:           var(--lp2-paper);
  --color-bg-muted:     var(--lp2-ash);
  --color-bg-inverse:   var(--lp2-ink);
  --color-fg:           var(--lp2-ink);
  --color-fg-muted:     var(--lp2-ink-80);
  --color-fg-subtle:    var(--lp2-ink-60);
  --color-fg-inverse:   var(--lp2-paper);
  --color-accent:       var(--lp2-orange);
  --color-accent-hover: #d85e1f;
  --color-border:       var(--lp2-ink-20);
  --color-border-subtle:#ece7e2;
  --color-danger:       var(--lp2-red);
  --color-warning:      var(--lp2-yellow);

  /* ---- TYPE ---- */
  --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale — punchy display headlines (Poppins likes weight + size) */
  --fs-display-xl: clamp(56px, 7.2vw, 112px); /* @kind font */
  --fs-display-l:  clamp(44px, 5.4vw, 80px);  /* @kind font */
  --fs-display-m:  clamp(36px, 4.2vw, 60px);  /* @kind font */
  --fs-h1:         clamp(32px, 3.4vw, 48px);  /* @kind font */
  --fs-h2:         clamp(26px, 2.6vw, 36px);  /* @kind font */
  --fs-h3:         22px;  /* @kind font */
  --fs-h4:         18px;  /* @kind font */
  --fs-body-l:     18px;  /* @kind font */
  --fs-body:       16px;  /* @kind font */
  --fs-body-s:     14px;  /* @kind font */
  --fs-caption:    12px;  /* @kind font */
  --fs-eyebrow:    13px;  /* @kind font */

  /* Line heights */
  --lh-display: 0.95;  /* @kind font */
  --lh-heading: 1.12;  /* @kind font */
  --lh-body:    1.55;  /* @kind font */
  --lh-tight:   1.25;  /* @kind font */

  /* Letter spacing */
  --ls-display: -0.02em;  /* @kind font */
  --ls-heading: -0.01em;  /* @kind font */
  --ls-eyebrow: 0.18em;  /* @kind font */
  --ls-body:    0;  /* @kind font */

  /* Weights */
  --fw-light:    300;  /* @kind font */
  --fw-regular:  400;  /* @kind font */
  --fw-medium:   500;  /* @kind font */
  --fw-semibold: 600;  /* @kind font */
  --fw-bold:     700;  /* @kind font */
  --fw-extra:    800;  /* @kind font */
  --fw-black:    900;  /* @kind font */

  /* ---- SPACING (4-pt base) ---- */
  --space-0:  0;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- RADII ----
     11point2 leans geometric. Mostly square or gently softened.
     Pills only on tags + chips, never on primary CTAs. */
  --radius-0:  0;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* ---- SHADOWS — subtle, brand prefers flat with strong type/colour ---- */
  --shadow-1: 0 1px 2px rgba(41, 41, 41, .06), 0 1px 1px rgba(41, 41, 41, .04);
  --shadow-2: 0 4px 12px rgba(41, 41, 41, .08), 0 2px 4px rgba(41, 41, 41, .04);
  --shadow-3: 0 12px 32px rgba(41, 41, 41, .10), 0 4px 8px rgba(41, 41, 41, .04);
  --shadow-glow-orange: 0 8px 28px rgba(238, 112, 46, .28);

  /* ---- MOTION ---- */
  --ease-out:   cubic-bezier(.22, 1, .36, 1); /* @kind other */
  --ease-launch: cubic-bezier(.16, 1, .3, 1); /* @kind other */ /* signature ease — quick lift then settle */
  --dur-fast:   140ms; /* @kind other */
  --dur-base:   220ms; /* @kind other */
  --dur-slow:   420ms; /* @kind other */

  /* ---- LAYOUT ---- */
  --container-max: 1240px; /* @kind spacing */
  --gutter:        clamp(20px, 4vw, 48px); /* @kind spacing */
}

/* =============================================================
   Element defaults — the tokens above expressed as base styles
   ============================================================= */

html { box-sizing: border-box; -webkit-text-size-adjust: 100%; }
*, *::before, *::after { box-sizing: inherit; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-fg);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--lp2-orange); color: var(--lp2-paper); }

/* =============================================================
   Typography utility classes
   ============================================================= */

.t-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--lp2-orange);
}

.t-display-xl { font-size: var(--fs-display-xl); font-weight: var(--fw-extra);   line-height: var(--lh-display); letter-spacing: var(--ls-display); margin: 0; }
.t-display-l  { font-size: var(--fs-display-l);  font-weight: var(--fw-extra);   line-height: var(--lh-display); letter-spacing: var(--ls-display); margin: 0; }
.t-display-m  { font-size: var(--fs-display-m);  font-weight: var(--fw-bold);    line-height: var(--lh-display); letter-spacing: var(--ls-display); margin: 0; }
.t-h1         { font-size: var(--fs-h1);         font-weight: var(--fw-bold);    line-height: var(--lh-heading); letter-spacing: var(--ls-heading); margin: 0; }
.t-h2         { font-size: var(--fs-h2);         font-weight: var(--fw-semibold);line-height: var(--lh-heading); letter-spacing: var(--ls-heading); margin: 0; }
.t-h3         { font-size: var(--fs-h3);         font-weight: var(--fw-semibold);line-height: var(--lh-tight);   letter-spacing: var(--ls-heading); margin: 0; }
.t-h4         { font-size: var(--fs-h4);         font-weight: var(--fw-semibold);line-height: var(--lh-tight);   margin: 0; }
.t-body-l     { font-size: var(--fs-body-l);     font-weight: var(--fw-regular); line-height: var(--lh-body);    margin: 0; }
.t-body       { font-size: var(--fs-body);       font-weight: var(--fw-regular); line-height: var(--lh-body);    margin: 0; }
.t-body-s     { font-size: var(--fs-body-s);     font-weight: var(--fw-regular); line-height: var(--lh-body);    margin: 0; }
.t-caption    { font-size: var(--fs-caption);    font-weight: var(--fw-medium);  line-height: 1.4;               letter-spacing: 0.02em; margin: 0; }

.t-grad {
  background: var(--lp2-grad-launch);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* =============================================================
   Buttons — square-edged, confident, small launchpad cue on hover
   ============================================================= */

.lp2-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border: 1.5px solid var(--lp2-ink);
  border-radius: var(--radius-xs);
  background: var(--lp2-ink);
  color: var(--lp2-paper);
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform var(--dur-base) var(--ease-launch),
              background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.lp2-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.lp2-btn:active { transform: translateY(0); }
.lp2-btn:focus-visible {
  outline: 3px solid var(--lp2-orange);
  outline-offset: 2px;
}
.lp2-btn .arrow { transition: transform var(--dur-base) var(--ease-launch); }
.lp2-btn:hover .arrow { transform: translate(3px, -3px); }

.lp2-btn--primary { background: var(--lp2-orange); color: var(--lp2-paper); border-color: var(--lp2-orange); }
.lp2-btn--primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); box-shadow: var(--shadow-glow-orange); }

.lp2-btn--ink { background: var(--lp2-ink); color: var(--lp2-paper); border-color: var(--lp2-ink); }

.lp2-btn--ghost {
  background: transparent;
  color: var(--lp2-ink);
  border-color: var(--lp2-ink);
}
.lp2-btn--ghost:hover { background: var(--lp2-ink); color: var(--lp2-paper); }

.lp2-btn--quiet {
  background: transparent;
  color: var(--lp2-ink);
  border-color: transparent;
  padding: 0 12px;
}
.lp2-btn--quiet:hover { background: var(--lp2-ash); box-shadow: none; transform: none; }

.lp2-btn--lg { height: 56px; padding: 0 28px; font-size: 16px; }
.lp2-btn--sm { height: 36px; padding: 0 16px; font-size: 13px; }

/* =============================================================
   Tags / chips
   ============================================================= */
.lp2-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--lp2-ash);
  color: var(--lp2-ink);
  font-size: 12px;
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.lp2-chip--orange { background: var(--lp2-orange-50); color: var(--lp2-orange); }
.lp2-chip--yellow { background: var(--lp2-yellow-50); color: #8a5e00; }
.lp2-chip--pink   { background: var(--lp2-pink-50);   color: #b8285f; }
.lp2-chip--red    { background: var(--lp2-red-50);    color: var(--lp2-red); }
.lp2-chip--ink    { background: var(--lp2-ink);       color: var(--lp2-paper); }
.lp2-chip--solid-orange { background: var(--lp2-orange); color: var(--lp2-paper); }

/* =============================================================
   Cards
   ============================================================= */
.lp2-card {
  background: var(--lp2-paper);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  transition: transform var(--dur-base) var(--ease-launch),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.lp2-card--hover:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
  border-color: var(--lp2-ink-20);
}
.lp2-card--ink     { background: var(--lp2-ink);    color: var(--lp2-paper); border-color: var(--lp2-ink); }
.lp2-card--ash     { background: var(--lp2-ash);    border-color: var(--lp2-ash-deep); }
.lp2-card--orange  { background: var(--lp2-orange); color: var(--lp2-paper); border-color: var(--lp2-orange); }

/* =============================================================
   Form inputs
   ============================================================= */
.lp2-field {
  display: flex; flex-direction: column; gap: 6px;
}
.lp2-field__label {
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  color: var(--lp2-ink);
  letter-spacing: 0.01em;
}
.lp2-input, .lp2-textarea, .lp2-select {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-xs);
  background: var(--lp2-paper);
  color: var(--lp2-ink);
  font-family: var(--font-sans);
  font-size: 15px;
  transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.lp2-textarea { height: auto; padding: 12px 16px; line-height: 1.5; resize: vertical; }
.lp2-input::placeholder, .lp2-textarea::placeholder { color: var(--lp2-ink-60); }
.lp2-input:focus, .lp2-textarea:focus, .lp2-select:focus {
  outline: none;
  border-color: var(--lp2-orange);
  box-shadow: 0 0 0 3px rgba(238, 112, 46, .18);
}

/* =============================================================
   Section dividers + utilities
   ============================================================= */
.lp2-rule { height: 1px; background: var(--color-border-subtle); border: 0; margin: 0; }
.lp2-rule--ink { background: var(--lp2-ink); }
.lp2-rule--orange { height: 4px; background: var(--lp2-grad-launch); border-radius: var(--radius-pill); }

.lp2-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.lp2-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.lp2-row   { display: flex; align-items: center; gap: var(--space-3); }

/* =============================================================
   Brand graphics — dot pattern + arrow
   ============================================================= */
.lp2-dots {
  background-image: radial-gradient(var(--lp2-ink-20) 1.4px, transparent 1.6px);
  background-size: 16px 16px;
}
.lp2-dots--orange {
  background-image: radial-gradient(var(--lp2-orange) 1.4px, transparent 1.6px);
}