/* ==========================================================================
   Pixi / prefix.dev — Colors & Type
   Tokens lifted from frontend/styles/prefix-theme.css and the Figma file.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Moranga";
  src: url("./fonts/Moranga-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Moranga";
  src: url("./fonts/Moranga-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Moranga";
  src: url("./fonts/Moranga-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Moranga";
  src: url("./fonts/Moranga-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Moranga";
  src: url("./fonts/Moranga-Black.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Moranga";
  src: url("./fonts/Moranga-LightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Moranga";
  src: url("./fonts/Moranga-RegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Body + mono — Inter & JetBrains Mono from Google Fonts.
   Caveat-style "handwritten" and Dosis are also used in frontend;
   pulled in here when the design calls for them. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&family=Caveat:wght@400;600&family=DM+Mono:wght@400;500&display=swap");

:root {
  /* ---------- Brand ---------- */
  --pfx-primary:        #ffd432; /* Pixi yellow */
  --pfx-primary-alt:    #ffca16; /* yellow border / hover */
  --pfx-secondary:      #5773ff; /* link blue */
  --pfx-good:           #70c038;
  --pfx-bad:            #ff6b38;
  --pfx-logo-top:       #fff500; /* logo gradient start */
  --pfx-logo-mid:       #ffc000;
  --pfx-logo-bottom:    #ff7a00; /* logo gradient end */
  --pfx-ink:            #001d38; /* near-black navy — the "text" color */
  --pfx-ink-deep:       #000f24;

  /* ---------- Warm neutrals (the cream/paper tones) ---------- */
  --pfx-cream-50:   #f8f6f2; /* page bg */
  --pfx-cream-100:  #f1ede4; /* card borders, rails */
  --pfx-cream-200:  #e2e2df;
  --pfx-cream-300:  #b5b7ba;
  --pfx-cream-400:  #8b8e93;
  --pfx-cream-500:  #777a7f;
  --pfx-cream-600:  #62656a;
  --pfx-cream-700:  #383d3f;
  --pfx-cream-800:  #2b2d2f;
  --pfx-cream-900:  #191910;

  /* ---------- Dark-mode neutrals ---------- */
  --pfx-dark-50:   #f8f6f2;
  --pfx-dark-100:  #f1ede4;
  --pfx-dark-200:  #dee0e3;
  --pfx-dark-300:  #b2b7bd;
  --pfx-dark-400:  #868e93;
  --pfx-dark-500:  #5e656e;
  --pfx-dark-600:  #383d42;
  --pfx-dark-700:  #181f25; /* card bg in dark */
  --pfx-dark-800:  #111518;
  --pfx-dark-900:  #101519; /* page bg in dark */

  /* ---------- Semantic — light theme (default) ---------- */
  --fg-1:          var(--pfx-ink);              /* primary text */
  --fg-2:          var(--pfx-cream-600);        /* secondary / muted */
  --fg-3:          var(--pfx-cream-400);        /* placeholder / disabled */
  --fg-link:       #3957ff;
  --fg-on-brand:   var(--pfx-ink);              /* text on yellow */

  --bg-page:       var(--pfx-cream-50);         /* #f8f6f2 */
  --bg-surface:    #ffffff;                     /* cards */
  --bg-inset:      var(--pfx-cream-100);        /* rails, code-block backdrops */
  --bg-brand:      var(--pfx-primary);          /* big yellow blocks */

  --border-1:      var(--pfx-cream-100);        /* default 1px card border */
  --border-2:      var(--pfx-cream-200);
  --border-brand:  var(--pfx-primary-alt);

  /* ---------- Elevation / shadows ---------- */
  --shadow-card:   0 4px 8px 0 rgba(59, 61, 63, 0.02);          /* the signature near-invisible drop */
  --shadow-soft:   0 0 40px 0 rgba(0, 29, 56, 0.06);
  --shadow-hover-yellow: 5px 5px var(--pfx-primary), 10px 10px #fff9d6; /* playful dual-shadow hover */

  /* ---------- Radii ---------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;   /* default for buttons, inputs */
  --radius-lg: 16px;   /* cards */
  --radius-xl: 24px;
  --radius-2xl: 32px;  /* large feature cards (rounded-4xl) */
  --radius-pill: 9999px;

  /* ---------- Spacing scale (4px base) ---------- */
  --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;

  /* ---------- Type families ---------- */
  --font-display:   "Moranga", "Fraunces", ui-serif, Georgia, serif;
  --font-body:      "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:      "JetBrains Mono", "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-handwritten: "Caveat", cursive;

  /* ---------- Type scale (semantic) ---------- */
  --fs-display-xl: 56px; --lh-display-xl: 1.05; --ls-display-xl: -0.01em;
  --fs-display-l:  40px; --lh-display-l:  1.2;  /* Moranga Light 40/48 per Figma */
  --fs-display-m:  32px; --lh-display-m:  1.125;/* Moranga Light 32/36 */
  --fs-display-s:  24px; --lh-display-s:  1.33; /* Moranga Light 24/32 */
  --fs-lead:       20px; --lh-lead:       1.4;  /* Moranga Light 20/28 (testimonial lead) */
  --fs-body-l:     18px; --lh-body-l:     1.55;
  --fs-body-m:     16px; --lh-body-m:     1.5;  /* Inter 16/24 */
  --fs-body-s:     14px; --lh-body-s:     1.5;
  --fs-caption:    12px; --lh-caption:    1.33; /* Inter 12/16 — metadata, labels */
  --fs-mono-s:     12px; --lh-mono-s:     1.5;
  --fs-mono-xs:    10px; --lh-mono-xs:    1.4;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1: 150ms;
  --dur-2: 250ms;
  --dur-3: 400ms;
  --dur-hover-card: 500ms;
}

/* ---------- Dark theme overrides ---------- */
.dark, [data-theme="dark"] {
  --fg-1:          var(--pfx-dark-50);
  --fg-2:          var(--pfx-dark-300);
  --fg-3:          var(--pfx-dark-500);
  --fg-link:       #9aaaff;
  --bg-page:       var(--pfx-dark-900);
  --bg-surface:    var(--pfx-dark-700);
  --bg-inset:      var(--pfx-dark-800);
  --border-1:      var(--pfx-dark-900);
  --border-2:      var(--pfx-dark-600);
}

/* ---------- Base element styles ---------- */
html { font-family: var(--font-body); color: var(--fg-1); background: var(--bg-page); }
body { margin: 0; font-size: var(--fs-body-m); line-height: var(--lh-body-m); }

h1, .h1 {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--fs-display-xl); line-height: var(--lh-display-xl);
  letter-spacing: var(--ls-display-xl);
  color: var(--fg-1); margin: 0;
}
h2, .h2 {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--fs-display-l); line-height: var(--lh-display-l);
  color: var(--fg-1); margin: 0;
}
h3, .h3 {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--fs-display-m); line-height: var(--lh-display-m);
  color: var(--fg-1); margin: 0;
}
h4, .h4 {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--fs-display-s); line-height: var(--lh-display-s);
  color: var(--fg-1); margin: 0;
}
.lead {
  font-family: var(--font-display); font-weight: 300;
  font-size: var(--fs-lead); line-height: var(--lh-lead);
}
p { margin: 0 0 var(--space-4) 0; color: var(--fg-1); }
.muted { color: var(--fg-2); }
small, .caption {
  font-family: var(--font-body); font-size: var(--fs-caption); line-height: var(--lh-caption);
  color: var(--fg-2);
}
code, kbd, .mono {
  font-family: var(--font-mono); font-size: var(--fs-mono-s);
}
.handwritten { font-family: var(--font-handwritten); font-weight: 400; }

a { color: var(--fg-link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Utility classes the UI kit uses ---------- */
.pfx-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.pfx-card-yellow {
  background: var(--pfx-primary);
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-lg);
  color: var(--fg-on-brand);
}
.pfx-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 300; font-size: 18px; line-height: 25px;
  padding: 3px 10px 4px; border-radius: var(--radius-md);
  background: var(--pfx-primary); color: var(--pfx-ink);
  border: 1.5px solid transparent;
  transition: background var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
  cursor: pointer;
}
.pfx-btn:hover { border-color: var(--pfx-ink); }
.pfx-btn-secondary { background: var(--pfx-ink); color: var(--pfx-primary); border-color: transparent; }
.pfx-btn-secondary:hover { background: var(--pfx-ink-deep); }
.pfx-btn-subtle { background: transparent; color: var(--pfx-primary-alt); border-color: var(--pfx-primary-alt); }
.pfx-btn-subtle:hover { background: var(--pfx-ink-deep); color: var(--pfx-primary); border-color: var(--pfx-primary); }