/*
 * carl.camp — Foundational tokens
 * ──────────────────────────────────
 * Two-mode brand: Campfire (warm, embered, neubrutalist-comic) +
 * Lab (deep-forest with neon traces). Both share neutrals.
 *
 * Source of truth: lib/tokens.ts in the carlcamp repo (palette, fonts,
 * stickerTokens, motion, duration, ease). The hex values + names below
 * mirror that file's `palette`, recovered from component usage.
 */

@import url("https://fonts.googleapis.com/css2?family=Special+Elite&family=JetBrains+Mono:wght@400;500;700&display=swap");

/* ═════════════════════════════════════════════════════════════════
   Brand fonts
   ═════════════════════════════════════════════════════════════════ */
@font-face {
  font-family: "Akira Expanded";
  src: url("fonts/Akira_Expanded_Demo.otf") format("opentype");
  font-weight: 700 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "LEMON MILK";
  src: url("fonts/LEMONMILK-Light.otf") format("opentype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "LEMON MILK";
  src: url("fonts/LEMONMILK-LightItalic.otf") format("opentype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "LEMON MILK";
  src: url("fonts/LEMONMILK-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "LEMON MILK";
  src: url("fonts/LEMONMILK-RegularItalic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "LEMON MILK";
  src: url("fonts/LEMONMILK-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "LEMON MILK";
  src: url("fonts/LEMONMILK-MediumItalic.otf") format("opentype");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "LEMON MILK";
  src: url("fonts/LEMONMILK-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "LEMON MILK";
  src: url("fonts/LEMONMILK-BoldItalic.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}

@font-face {
  font-family: "Cocogoose Pro";
  src: url("fonts/Cocogoose-Pro-Light-trial.ttf") format("truetype");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cocogoose Pro";
  src: url("fonts/Cocogoose-Pro-Light-Italic-trial.ttf") format("truetype");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Cocogoose Pro";
  src: url("fonts/Cocogoose-Pro-Semilight-trial.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cocogoose Pro";
  src: url("fonts/Cocogoose-Pro-Semilight-Italic-trial.ttf") format("truetype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Cocogoose Pro";
  src: url("fonts/Cocogoose-Pro-Regular-trial.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cocogoose Letterpress";
  src: url("fonts/Cocogoose-Pro-Letterpress-Regular-trial.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}

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

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

:root {
  /* ─── Backgrounds (stack from primary darkest forest, up) ──────── */
  --bg-primary:        #0A0F0A;   /* deep forest — OLED black w/ green tint */
  --bg-deep-forest:    #0B1410;   /* canopy at midnight */
  --bg-secondary:      #111B14;   /* undergrowth */
  --bg-undergrowth:    #131F18;   /* surfaces, raised cards */
  --bg-tertiary:       #1A2820;   /* tertiary fills */
  --bg-surface:        #182520;   /* shell surfaces */
  --bg-bark:           #2A1F14;   /* warm camp surface */
  --bg-chalkboard:     #1A2A1A;   /* chalk green-board */
  --bg-kraft:          #C8A776;   /* paper accents */

  /* ─── Camp accents (warm fire + night-sky luminance) ──────────── */
  --accent-ember:      #FF6B35;   /* primary CTA / brand orange */
  --accent-glow:       #E84B1A;   /* deeper hot red-orange (was flame) */
  --accent-flame:      #E84B1A;   /* alias for back-compat */
  --accent-honey:      #F2A93B;   /* warm amber (was spark) */
  --accent-spark:      #F2A93B;   /* alias for back-compat */
  --accent-firefly:    #A8FFB0;   /* soft luminous mint — night-sky pinpoint */
  --accent-burgundy:   #3A1A2E;   /* deep night-purple substrate (was coal) */
  --accent-coal:       #3A1A2E;   /* alias for back-compat */

  /* ─── Lab neon (cool, electric) ─────────────────────────────────── */
  --neon-cyan:         #00F0FF;
  --neon-pink:         #FF1493;
  --neon-purple:       #B026FF;
  --neon-yellow:       #FFFF33;
  --neon-green:        #39FF14;

  /* ─── Comic / neubrutalist palette (for badges, stamps, signs) ──── */
  --comic-paper:       #F5EBD8;
  --comic-kraft:       #C8A776;
  --comic-jayhawk:     #1E3A8A;   /* vibrant deep blue (replaces cabin-brown) */
  --comic-cabin-brown: #1E3A8A;   /* alias for back-compat */
  --comic-varsity-red: #C72C2C;
  --comic-ink:         #0A0A0A;

  /* ─── Text ──────────────────────────────────────────────────────── */
  --text-moonlight:    #ECE7DC;   /* primary text on dark, faintly warm */
  --text-primary:      #ECE7DC;
  --text-secondary:    #B8AFA0;   /* warm secondary */
  --text-smoke:        #8C8378;   /* secondary, smoky warm */
  --text-tertiary:     #6E6759;
  --text-coal:         #3D3530;   /* dim, locked */
  --text-on-camp:      #2A1F14;   /* dark text on warm fills */

  /* ─── Borders ───────────────────────────────────────────────────── */
  --border-default:    rgba(236,231,220,0.12);
  --border-subtle:     rgba(236,231,220,0.06);
  --border-ember:      rgba(255,107,53,0.32);
  --border-cyan:       rgba(0,240,255,0.32);
  --border-ink:        #0A0A0A;   /* hard black for neubrutalist */

  /* ─── Surface helpers ───────────────────────────────────────────── */
  --surface-epoxy:        rgba(255,255,255,0.04);
  --surface-epoxy-hover:  rgba(255,255,255,0.07);

  /* ─── Type families ────────────────────────────────────────────── */
  --font-handwritten: "Nirakolu", "Project Note", system-ui, sans-serif;  /* "Carl" wordmark */
  --font-hand:        "Project Note", "Nirakolu", cursive;                /* annotations / labels */
  --font-display:     "Akira Expanded", "Cocogoose Pro", system-ui, sans-serif; /* hero / sign letters */
  --font-camp:        "Akira Expanded", "Cocogoose Pro", sans-serif;     /* stamps, retro buttons */
  --font-secondary:   "Cocogoose Pro", "LEMON MILK", sans-serif;          /* secondary display */
  --font-letterpress: "Cocogoose Letterpress", "Cocogoose Pro", sans-serif; /* signs, distressed feel */
  --font-journal:     "Special Elite", "Courier Prime", monospace;        /* sub-text on signs */
  --font-mono:        "JetBrains Mono", ui-monospace, "SF Mono", monospace;
  --font-body:        "LEMON MILK", system-ui, -apple-system, sans-serif;

  /* ─── Type scale ───────────────────────────────────────────────── */
  --fs-display:   clamp(48px, 7vw, 96px);
  --fs-h1:        clamp(36px, 5vw, 64px);
  --fs-h2:        clamp(28px, 3.5vw, 44px);
  --fs-h3:        clamp(22px, 2.5vw, 30px);
  --fs-h4:        18px;
  --fs-body:      15px;
  --fs-small:     13px;
  --fs-caption:   11px;
  --fs-micro:     10px;

  --lh-tight:   0.95;
  --lh-snug:    1.15;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  --track-display:  -0.02em;
  --track-heading:  -0.01em;
  --track-mono:     0.04em;
  --track-caption:  0.15em;     /* uppercase mono labels */

  /* ─── Spacing (4-pt scale) ─────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* ─── Radii ────────────────────────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ─── Shadows ──────────────────────────────────────────────────── */
  --sh-sm:        0 1px 2px rgba(0,0,0,0.4);
  --sh-md:        0 4px 14px rgba(0,0,0,0.4);
  --sh-lg:        0 12px 36px rgba(0,0,0,0.55);
  --sh-ember:     0 0 30px rgba(255,107,53,0.30);
  --sh-cyan:      0 0 30px rgba(0,240,255,0.30);
  --sh-comic:     6px 6px 0 var(--border-ink);   /* hard 100%-opaque drop */
  --sh-comic-sm:  3px 3px 0 var(--border-ink);
  --sh-comic-lg:  10px 10px 0 var(--border-ink);

  /* ─── Motion ───────────────────────────────────────────────────── */
  --dur-instant: 0.08s;
  --dur-fast:    0.18s;
  --dur-base:    0.3s;
  --dur-slow:    0.6s;
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap:   cubic-bezier(0.5, 0, 0.1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ═════════════════════════════════════════════════════════════════
   Semantic primitives — drop-in tags for prototypes
   ═════════════════════════════════════════════════════════════════ */

html, body {
  background: var(--bg-primary);
  color: var(--text-moonlight);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--track-display);
  color: var(--text-moonlight);
  text-wrap: balance;
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--track-heading);
  color: var(--text-moonlight);
  text-wrap: balance;
}
h3, .h3 {
  font-family: var(--font-handwritten);
  font-weight: 800;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--text-moonlight);
}
h4, .h4 {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: 1.3;
  color: var(--text-moonlight);
}
p, .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-secondary);
  text-wrap: pretty;
}
small, .caption {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: var(--track-caption);
  text-transform: uppercase;
  color: var(--text-smoke);
}
code, kbd, pre, .code {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--track-mono);
  color: var(--text-moonlight);
}
.hand {
  font-family: var(--font-hand);
  font-size: 22px;
  letter-spacing: 0;
  color: var(--text-moonlight);
  transform: rotate(-1.2deg);
  display: inline-block;
}
.journal {
  font-family: var(--font-journal);
  font-size: var(--fs-small);
  letter-spacing: 0;
  color: var(--comic-kraft);
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-ember);
}

/* ═════════════════════════════════════════════════════════════════
   Neubrutalist comic helpers — used across camp surfaces
   ═════════════════════════════════════════════════════════════════ */
.comic-outline   { border: 3px solid var(--border-ink); }
.comic-outline-thick { border: 5px solid var(--border-ink); }
.comic-shadow    { box-shadow: var(--sh-comic); }
.comic-shadow-sm { box-shadow: var(--sh-comic-sm); }
.comic-shadow-lg { box-shadow: var(--sh-comic-lg); }
.comic-shadow-ember { box-shadow: 6px 6px 0 var(--accent-ember); }
.halftone {
  background-image: radial-gradient(circle, rgba(0,0,0,0.18) 1px, transparent 1.5px);
  background-size: 6px 6px;
}
.stamp-effect {
  display: inline-block;
  font-family: var(--font-camp);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 2px solid currentColor;
  border-radius: 4px;
  transform: rotate(-3deg);
  opacity: 0.85;
}
.camp-sign {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 14px 22px;
  border: 3px solid var(--comic-cabin-brown);
  border-radius: var(--r-md);
  box-shadow: var(--sh-comic-sm);
  color: var(--text-moonlight);
  display: inline-block;
}
