/* ================================================================
   Blend — Colors & Type
   The full visual foundation. Import this once at the top of any
   HTML file and you have access to the brand's CSS variables and
   the canonical text / helper classes.
   ================================================================ */

/* ---------- 1. Fonts -------------------------------------------- */

@font-face {
  font-family: "Neulis Cursive";
  src: url("fonts/NeulisCursive-Light.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neulis Cursive";
  src: url("fonts/NeulisCursive-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neulis Cursive";
  src: url("fonts/NeulisCursive-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Neulis Cursive";
  src: url("fonts/NeulisCursive-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neulis Cursive";
  src: url("fonts/NeulisCursive-SemiBold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neulis Cursive";
  src: url("fonts/NeulisCursive-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neulis Cursive";
  src: url("fonts/NeulisCursive-BoldItalic.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Neulis Cursive";
  src: url("fonts/NeulisCursive-Black.otf") format("opentype");
  font-weight: 800 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neulis Cursive";
  src: url("fonts/NeulisCursive-ExtraBoldItalic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
/* — Extended ramp + italics, self-hosted from the uploaded family — */
@font-face {
  font-family: "Neulis Cursive";
  src: url("fonts/fonnts.com-Neulis_Cursive_Hairline.otf") format("opentype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neulis Cursive";
  src: url("fonts/fonnts.com-Neulis_Cursive_Hairline_Italic.otf") format("opentype");
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Neulis Cursive";
  src: url("fonts/fonnts.com-Neulis_Cursive_Thin.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neulis Cursive";
  src: url("fonts/fonnts.com-Neulis_Cursive_Thin_Italic.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Neulis Cursive";
  src: url("fonts/fonnts.com-Neulis_Cursive_Extra_Light.otf") format("opentype");
  font-weight: 275;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neulis Cursive";
  src: url("fonts/fonnts.com-Neulis_Cursive_Extra_Light_Italic.otf") format("opentype");
  font-weight: 275;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Neulis Cursive";
  src: url("fonts/fonnts.com-Neulis_Cursive_Light_Italic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Neulis Cursive";
  src: url("fonts/fonnts.com-Neulis_Cursive_Medium_Italic.otf") format("opentype");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Neulis Cursive";
  src: url("fonts/fonnts.com-Neulis_Cursive_Semi_Bold_Italic.otf") format("opentype");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Maksimal";
  src: url("fonts/Maksimal.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Tokens ------------------------------------------- */

:root {
  /* — Brand palette — */
  --blend-cream:    #FFF8E8;   /* primary background */
  --blend-cream-2:  #F4ECD4;   /* secondary surface — slightly darker cream */
  --blend-ink:      #1A1714;   /* near-black, warm */
  --blend-ink-2:    #3A332C;   /* secondary text on cream */
  --blend-black:    #0B0B0A;   /* full-bleed dark sections */

  /* The five "blend dots" — accent palette */
  --blend-blue:     #2457E5;
  --blend-yellow:   #FDCD03;
  --blend-pink:     #F7B6C2;
  --blend-green:    #13A454;
  --blend-orange:   #FF7403;
  --blend-red:      #E03E1A;   /* used sparingly for warnings / system errors */

  /* — Functional foreground ramps on cream — */
  --fg1:            var(--blend-ink);
  --fg2:            #58504A;   /* secondary copy */
  --fg3:            #8A8278;   /* tertiary copy / captions / footers */
  --fg-on-dark-1:   var(--blend-cream);
  --fg-on-dark-2:   rgba(255, 248, 232, 0.72);
  --fg-on-dark-3:   rgba(255, 248, 232, 0.5);

  /* — Stroke / hairline — */
  --stroke-ink:     #1A1714;
  --stroke-w:       2px;       /* canonical card / button stroke */
  --hairline:       rgba(26, 23, 20, 0.12);

  /* — Type stack — */
  --font-display:   "Neulis Cursive", "Recoleta", "Cooper BT", Georgia, serif;
  --font-body:      "Montserrat", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono:      ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --font-hand:      "Maksimal", "Caveat", "Permanent Marker", cursive;

  /* — Font sizes (semantic scale) — */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-md:    16px;
  --fs-lg:    18px;
  --fs-xl:    22px;
  --fs-2xl:   28px;
  --fs-3xl:   36px;
  --fs-4xl:   48px;
  --fs-5xl:   64px;
  --fs-6xl:   84px;
  --fs-7xl:   110px;
  --fs-8xl:   140px;

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

  /* — Radii — */
  --radius-xs:  6px;     /* chips, badges */
  --radius-sm:  10px;    /* small cards */
  --radius-md:  14px;    /* inputs, default card */
  --radius-lg:  18px;    /* large cards */
  --radius-xl:  22px;    /* feature card / module */
  --radius-pill: 999px;

  /* — Hard "stickered" shadows. No blur. Stacks against ink stroke. — */
  --shadow-hard-sm: 3px 3px 0 0 var(--blend-ink);
  --shadow-hard:    5px 5px 0 0 var(--blend-ink);
  --shadow-hard-lg: 8px 8px 0 0 var(--blend-ink);
  /* Soft elevation — used sparingly, mostly in app UI, not on print */
  --shadow-soft:    0 1px 0 rgba(26,23,20,0.06), 0 6px 22px -8px rgba(26,23,20,0.18);
  --shadow-soft-lg: 0 1px 0 rgba(26,23,20,0.06), 0 24px 60px -18px rgba(26,23,20,0.28);

  /* — Motion — */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 360ms;

  /* — The signature rainbow stripe (in flex order) — */
  --stripe-1: var(--blend-blue);
  --stripe-2: var(--blend-yellow);
  --stripe-3: var(--blend-pink);
  --stripe-4: var(--blend-green);
  --stripe-5: var(--blend-orange);
}

/* ---------- 3. Element baseline --------------------------------- */

html, body {
  font-family: var(--font-body);
  color: var(--fg1);
  background: var(--blend-cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings — display face by default. Tight tracking, slight optical balance. */
h1, h2, h3, .blend-h1, .blend-h2, .blend-h3 {
  font-family: var(--font-display);
  color: var(--fg1);
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}
h1, .blend-h1 { font-size: var(--fs-6xl); font-weight: 700; line-height: 0.98; }
h2, .blend-h2 { font-size: var(--fs-4xl); font-weight: 700; line-height: 1.02; }
h3, .blend-h3 { font-size: var(--fs-2xl); font-weight: 600; line-height: 1.1;  letter-spacing: -0.015em; }

h4, .blend-h4 {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.005em;
  margin: 0;
}

p, .blend-body {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: 400;
  line-height: 1.55;
  color: var(--fg1);
  text-wrap: pretty;
  margin: 0;
}
.blend-body-lg { font-size: var(--fs-lg); line-height: 1.5; }
.blend-body-sm { font-size: var(--fs-sm); line-height: 1.5; color: var(--fg2); }

/* Eyebrow — mono, tracked out, uppercase. Default orange because that's the
   loudest of the brand dots; override `color` for variants. */
.blend-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blend-orange);
}

/* Mono caption — slide footers, ledger captions */
.blend-caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.01em;
  color: var(--fg3);
}

/* Hand-drawn marker — Maksimal script, used for asides and "winks" */
.blend-hand {
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  color: var(--blend-orange);
  display: inline-block;
}

/* Hand-drawn underline accent — sits under specific words in headings.
   Uses vector-underline.svg as a background, scaled to the text run. */
.blend-underline {
  display: inline-block;
  background-image: url("assets/vector-underline.svg");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.28em;
  padding-bottom: 0.18em;
}

/* Pill chip — used for filters, tags, "small-truths" */
.blend-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: var(--blend-cream);
  border: 1.5px solid var(--stroke-ink);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg1);
  white-space: nowrap;
}
.blend-pill--ink   { background: var(--blend-ink); color: var(--blend-cream); border-color: var(--blend-ink); }
.blend-pill--blue  { background: var(--blend-blue); color: #fff; border-color: var(--blend-ink); }
.blend-pill--green { background: var(--blend-green); color: #fff; border-color: var(--blend-ink); }
.blend-pill--yellow{ background: var(--blend-yellow); color: var(--blend-ink); border-color: var(--blend-ink); }
.blend-pill--pink  { background: var(--blend-pink); color: var(--blend-ink); border-color: var(--blend-ink); }
.blend-pill--orange{ background: var(--blend-orange); color: #fff; border-color: var(--blend-ink); }

/* The signature five-stripe rainbow band */
.blend-stripe {
  display: flex;
  width: 100%;
  height: 10px;
}
.blend-stripe > * { flex: 1; }

/* Selection — yellow paint, ink text */
::selection { background: var(--blend-yellow); color: var(--blend-ink); }

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}