/* Champie — Candid display face. Self-hosted (keeps the CSP tight, no CDN). */
@font-face {
  font-family: "Champie";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/static/fonts/Champie-Light.woff") format("woff"),
       url("/static/fonts/Champie-Light.ttf") format("truetype");
}
@font-face {
  font-family: "Champie";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/Champie-Regular.woff") format("woff"),
       url("/static/fonts/Champie-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Champie";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/Champie-Medium.woff") format("woff"),
       url("/static/fonts/Champie-Medium.ttf") format("truetype");
}

/* Lenny design tokens — from docs/brand-system.md §6.
   Code against the SEMANTIC layer (--color-primary, etc.), not raw hex. */
:root {
  /* Brand palette — 2026 refresh (Nell's). Hierarchy:
     red, teal, off-white, deep purple, pink, fluro yellow. */
  --color-nells-red:    #FF4700;
  --color-nells-teal:   #00A29D;
  --color-off-white:    #FDFDF9;
  --color-deep-purple:  #441D35;
  --color-pink:         #FF7ABA;
  --color-pink-pale:    #FFE4F1;   /* soft pink tint for backgrounds */
  --color-fluro:        #D9ED00;
  --color-ink:          #2D2D2A;

  /* Legacy names remapped onto the new palette, so all existing CSS
     (which codes against these) picks up the change everywhere. */
  --color-salmon-roe:        var(--color-nells-red);
  --color-crushed-cherry:    var(--color-deep-purple);
  --color-pale-peach:        var(--color-pink-pale);
  --color-dusty-marshmallow: var(--color-off-white);

  /* Support */
  --color-haribo-blue:       #0000D3;   /* focus ring only */
  --color-isotonic-green:    var(--color-fluro);
  --color-candy-floss-blue:  var(--color-nells-teal);
  --color-surface:           #FFFFFF;

  /* Semantic layer — code against these */
  --color-bg:            var(--color-dusty-marshmallow);
  --color-text:          var(--color-ink);
  --color-text-inverse:  #FFFFFF;
  --color-muted:         #6b6b66;
  --color-primary:       var(--color-salmon-roe);
  --color-primary-hover: #E63F00;
  /* Links use cherry (not standard blue); salmon stays for arrows/accents. */
  --color-link:          var(--color-crushed-cherry);
  --color-positive:      var(--color-isotonic-green); /* accent/backgrounds only */
  --color-focus-ring:    var(--color-haribo-blue);
  --color-border:        #e2ded9;
  --color-danger:        #b00020;

  /* Type */
  --font-display: "Champie", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-brand:   "Fredoka", "Inter", sans-serif; /* wordmark / logo only */
  --text-body:    17px;   /* larger than adult default, on purpose */
  --text-h1:      30px;
  --text-display: 40px;
  --leading-tight: 1.1;
  --leading-body:  1.5;

  /* Radius (Candid's rounded language) */
  --radius-sm:   10px;
  --radius-md:   15px;    /* default card/button */
  --radius-lg:   25px;
  --radius-pill: 1000px;

  /* Elevation */
  --shadow-sm: -1.216px 6.894px 15px 0 rgb(0 0 0 / 0.07);
  --shadow-md: -1.216px 6.894px 25px 0 rgb(0 0 0 / 0.07);
  --shadow-lg: -3.473px 19.696px 25px 0 rgb(0 0 0 / 0.20);

  /* Spacing (4px scale) */
  --space-1: 4px; --space-2: 8px; --space-3: 16px;
  --space-4: 24px; --space-5: 32px; --space-6: 48px;

  /* Tap target minimum for a mobile, youth audience */
  --tap-min: 44px;

  /* Short aliases used by the Claude Design refresh (same values). Lets design
     output drop in cleanly. Prefer these for new/redesigned markup. */
  --salmon: var(--color-salmon-roe);
  --cherry: var(--color-crushed-cherry);
  --peach: var(--color-pale-peach);
  --marsh: var(--color-dusty-marshmallow);
  --ink: var(--color-ink);
  --green: var(--color-isotonic-green);
  --sky: var(--color-candy-floss-blue);
  --surface: var(--color-surface);
  --muted: var(--color-muted);
  --border: var(--color-border);
  --primary-hover: var(--color-primary-hover);
  /* Canonical new-palette aliases (prefer these for new markup). */
  --red: var(--color-nells-red);
  --teal: var(--color-nells-teal);
  --purple: var(--color-deep-purple);
  --pink: var(--color-pink);
  --fluro: var(--color-fluro);
  --offwhite: var(--color-off-white);
  --fdisp: var(--font-display);
  --fbody: var(--font-body);
  --fbrand: var(--font-brand);
}