/* ============================================
   bokami — Webfonts
   PRIMARY (v2): Fredoka (display) · Plus Jakarta Sans (body) · Caveat (hand)
   These replace the original pack for on-screen use — they read far better
   on the website while keeping the rounded, cozy, kawaii feel.
   The original brand TTFs are kept below as optional / legacy faces.
   ============================================ */

/* --- Google Fonts (primary on-screen families) ---
   Fredoka          — DISPLAY. Rounded, chunky, modern; headings & hero.
   Plus Jakarta Sans— BODY / UI. Warm humanist sans designed in Jakarta —
                      a fitting nod to bokami's Indonesian roots; very legible.
   Caveat           — HAND. Friendly handwriting for character voice & captions.
*/
@import url("https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Fredoka:wght@400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Courgette&family=Caveat:wght@500;600;700&display=swap");

/* --- Original brand pack (self-hosted, optional / legacy) --- */

/* Do Hyeon — bubbly rounded; available as an alt display face. */
@font-face {
  font-family: "Do Hyeon";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/DoHyeon-Regular.ttf") format("truetype");
}

/* Glory — marker handwriting; alt hand face. */
@font-face {
  font-family: "Glory Hand";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Glory.ttf") format("truetype");
}

/* Yes Free — chunky brush; sticker / badge display. */
@font-face {
  font-family: "Yes Free";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/YesFree.ttf") format("truetype");
}

/* Dokdo — quirky doodle handwriting. */
@font-face {
  font-family: "Dokdo";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Dokdo-Regular.ttf") format("truetype");
}

/* ============================================
   bokami — Color tokens
   Warm, cozy pastel system. Dusty-rose primary,
   cream surfaces, three character accent hues.
   ============================================ */
:root {
  /* ---- Brand / primary (dusty rose-mauve — also THE outline color) ---- */
  --mauve-700: #5A3E3C; /* deep cocoa — strongest text          */
  --mauve-600: #7C4A48;
  --mauve-500: #9A5251; /* primary pressed / hover-dark         */
  --mauve-400: #B26362; /* PRIMARY brand + signature outline    */
  --mauve-300: #C98A89;
  --mauve-200: #E3BEBD;
  --mauve-100: #F1DCDB;
  --mauve-050: #FAEFEE;

  /* ---- Creams / warm neutrals (surfaces) ---- */
  --cream-50:  #FBFAF6; /* page background — light warm white (Claude-like) */
  --cream-100: #F4EFE6; /* warm section / panel                 */
  --cream-200: #EBE2D2;
  --white:     #FFFFFF;

  /* ---- Ink / text neutrals (warm-tinted greys) ---- */
  --ink-900: #4A3331;
  --ink-700: #6E4F4D;
  --ink-500: #9B807E;
  --ink-300: #C4B2B0;
  --ink-100: #E9DEDC;

  /* ---- Character accents ---- */
  /* Boro — capybara — soft sky blue */
  --boro-bg:   #A4D6E0;
  --boro-soft: #C9E7ED;
  --boro-deep: #6FAFBD;
  /* Kato — calico cat — soft yellow/cream */
  --kato-bg:   #FBE6B0;
  --kato-soft: #FCF1D2;
  --kato-deep: #E9C871;
  /* Mico — red panda — soft pink/salmon */
  --mico-bg:   #FBD2CE;
  --mico-soft: #FCE6E3;
  --mico-deep: #F4AB9A;

  /* ---- Extended pastel palette (from brand sheet) ---- */
  --coral:   #FCBFB5;
  --salmon:  #F4AB9A;
  --teal:    #9FC5CB;
  --sky:     #A4D6E0;
  --orange:  #F7B589;
  --orange-bright: #FFBF75;

  /* ---- Semantic UI states (kept inside the warm pastel family) ---- */
  --success:    #7FB59B;
  --success-bg: #E2F0E9;
  --warning:    #F2A43C;
  --warning-bg: #FCEBCF;
  --danger:     #D9776B;
  --danger-bg:  #F8DDD8;
  --info:       #6FAFBD;
  --info-bg:    #DCEEF2;

  /* ================= Semantic aliases ================= */
  --primary:           var(--mauve-400);
  --primary-hover:     var(--mauve-500);
  --primary-active:    var(--mauve-600);
  --primary-contrast:  var(--cream-50);

  /* Press states (v3 interaction language — buttons press DOWN into these) */
  --press-fill:          var(--salmon);  /* light buttons → salmon on hover   */
  --press-fill-dark:     #D9968D;        /* dark/primary buttons → lighter    */
  --press-contrast:      #FBF6F0;        /* text on a pressed light button    */
  --press-glow:          rgba(244, 171, 154, 0.55); /* salmon halo            */

  --outline:           var(--mauve-400); /* signature thick chibi outline */
  --outline-soft:      var(--mauve-200);

  --text-strong:       var(--mauve-700);
  --text-body:         var(--ink-700);
  --text-muted:        var(--ink-500);
  --text-on-color:     var(--cream-50);
  --text-link:         var(--mauve-500);

  --surface-page:      var(--cream-50);
  --surface-warm:      var(--cream-100);
  --surface-card:      var(--white);
  --surface-sunken:    var(--cream-100);

  --border-soft:       var(--mauve-100);
  --border-strong:     var(--mauve-400);

  --focus-ring:        var(--boro-deep);
}

/* ============================================
   bokami — Typography tokens
   Display: Do Hyeon · Body/UI: Nunito
   Accent: Glory (hand) · Yes Free (sticker) · Dokdo (doodle)
   ============================================ */
:root {
  /* ---- Families (v2) ---- */
  --font-display: "Baloo 2", "Fredoka", "Nunito", system-ui, sans-serif;  /* headings & hero */
  --font-body:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* body + UI */
  --font-hand:    "Courgette", "Caveat", "Comic Sans MS", cursive;   /* character voice / captions */
  --font-sticker: "Yes Free", "Fredoka", sans-serif;                   /* sticker labels */
  --font-doodle:  "Courgette", "Dokdo", cursive;                     /* incidental doodles */
  --font-display-alt: "Do Hyeon", "Fredoka", sans-serif;               /* legacy bubbly display */

  /* ---- Weights ---- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;
  --weight-black:    800;

  /* ---- Type scale (rem @ 16px root) ---- */
  --text-xs:   0.75rem;   /* 12 — legal / micro      */
  --text-sm:   0.8125rem; /* 13 — captions           */
  --text-base: 0.9375rem; /* 15 — secondary body     */
  --text-md:   1rem;      /* 16 — body               */
  --text-lg:   1.125rem;  /* 18 — lead body          */
  --text-xl:   1.375rem;  /* 22 — card title         */
  --text-2xl:  1.75rem;   /* 28 — section subhead    */
  --text-3xl:  2.25rem;   /* 36 — section head       */
  --text-4xl:  3rem;      /* 48 — page title         */
  --text-5xl:  4rem;      /* 64 — hero               */
  --text-6xl:  5.5rem;    /* 88 — display hero       */

  /* ---- Line heights ---- */
  --leading-tight:   1.05; /* display                */
  --leading-snug:    1.2;  /* headings               */
  --leading-normal:  1.5;  /* body                   */
  --leading-relaxed: 1.7;  /* long-form              */

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-sticker: 0.02em;
}

/* ============================================
   bokami — Spacing, radii, shadows, motion
   Bubbly + cozy: generous radii, thick outlines,
   soft warm shadows + a playful "sticker pop" shadow.
   ============================================ */
:root {
  /* ---- Spacing scale (4px 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 (bubbly/rounded) ---- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   22px;
  --radius-xl:   30px;
  --radius-2xl:  40px;
  --radius-pill: 999px;
  --radius-blob: 48% 52% 55% 45% / 52% 48% 52% 48%; /* organic blob */

  /* ---- Border widths (thick chibi outline) ---- */
  --border-thin:  1.5px;
  --border:       2.5px;  /* default UI outline      */
  --border-thick: 3.5px;  /* emphasis / hero outline */

  /* ---- Shadows ---- */
  /* Soft warm ambient (mauve-tinted) */
  --shadow-xs:   0 1px 2px rgba(90, 62, 60, 0.08);
  --shadow-sm:   0 2px 8px rgba(90, 62, 60, 0.10);
  --shadow-md:   0 8px 20px rgba(90, 62, 60, 0.12);
  --shadow-lg:   0 16px 40px rgba(90, 62, 60, 0.16);
  /* "Sticker pop" — solid offset in the outline color (cute hard shadow) */
  --shadow-pop:    0 4px 0 var(--mauve-400);
  --shadow-pop-sm: 0 3px 0 var(--mauve-400);
  --shadow-pop-press: 0 1px 0 var(--mauve-400);
  /* v3 press system: raised → hover-pressed → fully-pressed depths.
     Dark variants offset in mauve-700 (for primary-filled buttons). */
  --shadow-pop-dark:       0 4px 0 var(--mauve-700);
  --shadow-pop-dark-press: 0 1px 0 var(--mauve-700);
  --shadow-pop-flat:       0 0 0 var(--mauve-400);
  --shadow-pop-dark-flat:  0 0 0 var(--mauve-700);

  /* ---- Motion (bouncy + cozy) ---- */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --ease-soft:   cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --dur-fast:    120ms; /* @kind other */
  --dur-base:    220ms; /* @kind other */
  --dur-slow:    360ms; /* @kind other */

  /* ---- Layout ---- */
  --container:    1200px;
  --container-sm: 760px;
}

/* ============================================
   bokami — Base element defaults & helpers
   Shipped to consumers as global CSS.
   ============================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--weight-regular);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background-color: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: var(--leading-snug);
  color: var(--text-strong);
  margin: 0 0 var(--space-4);
  letter-spacing: var(--tracking-tight);
}
h1 { font-size: var(--text-4xl); line-height: var(--leading-tight); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-soft);
}
a:hover { color: var(--primary-active); }

strong, b { font-weight: var(--weight-extra); }

small { font-size: var(--text-sm); }

::selection { background: var(--mico-deep); color: var(--cream-50); }

:focus-visible {
  outline: var(--border-thick) solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ---- A few brand helper classes ---- */
.bk-hand    { font-family: var(--font-hand); }
.bk-sticker { font-family: var(--font-sticker); letter-spacing: var(--tracking-sticker); }
.bk-doodle  { font-family: var(--font-doodle); }

.bk-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

/* ============================================
   bokami — Component interaction states
   (hover / active / focus that inline styles can't express)

   v3 INTERACTION LANGUAGE — "press, don't lift".
   Buttons rest RAISED (translateY(-1px) + solid sticker-pop depth) and
   PRESS DOWN on hover: the depth shadow collapses while the fill turns
   salmon (--press-fill) with page-cream text (--press-contrast). Filled
   primary buttons instead LIGHTEN to --press-fill-dark. Click = fully
   pressed (depth 0) + a burst of cartoony sparks (see .bk-sparks below;
   the delegated spawner lives in ui_kits/town/town-fx.jsx — copy it).
   Settled across bokami town; use everywhere.
   ============================================ */

/* ---- Button: raised sticker that presses down ---- */
.bk-btn { transform: translateY(-1px); }
.bk-btn:not(:disabled):hover  { transform: translateY(2px); }
.bk-btn:not(:disabled):active { transform: translateY(3px); }
.bk-btn[data-variant="primary"]:not(:disabled):hover {
  background: var(--press-fill-dark) !important;
  box-shadow: var(--shadow-pop-dark-press);
}
.bk-btn[data-variant="primary"]:not(:disabled):active { box-shadow: var(--shadow-pop-dark-flat); }
.bk-btn[data-variant="secondary"]:not(:disabled):hover,
.bk-btn[data-variant="soft"]:not(:disabled):hover,
.bk-btn[data-variant="ghost"]:not(:disabled):hover {
  background: var(--press-fill) !important;
  color: var(--press-contrast) !important;
  box-shadow: var(--shadow-pop-press);
}
.bk-btn[data-variant="secondary"]:not(:disabled):active,
.bk-btn[data-variant="soft"]:not(:disabled):active,
.bk-btn[data-variant="ghost"]:not(:disabled):active { box-shadow: var(--shadow-pop-flat); }

/* ---- IconButton: same press ---- */
.bk-iconbtn { transform: translateY(-1px); }
.bk-iconbtn:not(:disabled):hover  { transform: translateY(2px); background: var(--press-fill) !important; color: var(--press-contrast) !important; box-shadow: var(--shadow-pop-press); }
.bk-iconbtn:not(:disabled):active { transform: translateY(3px); box-shadow: var(--shadow-pop-flat); }

/* ---- Directional icon pulses ----
   Wrap a button's glyph/icon in <i class="bki bki--right">→</i>; on hover
   of the parent control it pulses along its own direction. */
.bki { font-style: normal; display: inline-block; }
:is(button, a, [role="button"]):hover .bki--left  { animation: bki-left  .7s ease-in-out infinite; }
:is(button, a, [role="button"]):hover .bki--right { animation: bki-right .7s ease-in-out infinite; }
:is(button, a, [role="button"]):hover .bki--down  { animation: bki-down  .7s ease-in-out infinite; }
:is(button, a, [role="button"]):hover .bki--up    { animation: bki-up    .7s ease-in-out infinite; }
:is(button, a, [role="button"]):hover .bki--bob   { animation: bki-bob   .7s ease-in-out infinite; }
@keyframes bki-left  { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-5px); } }
@keyframes bki-right { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
@keyframes bki-down  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
@keyframes bki-up    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes bki-bob   { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-3px) rotate(-9deg); } }

/* ---- Cartoony click sparks ----
   Spawned around a clicked button by the delegated listener in
   ui_kits/town/town-fx.jsx (16 thin lines radiating out, brand colors). */
.bk-sparks { position: fixed; z-index: 220; width: 0; height: 0; pointer-events: none; }
.bk-sparks i { position: absolute; left: -1.5px; top: -6px; width: 3px; height: 11px; border-radius: 999px; animation: bk-spark .5s ease-out forwards; }
@keyframes bk-spark { 0% { opacity: 1; transform: translate(0, 0) rotate(var(--rot)) scaleY(.3); } 55% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scaleY(1); } }

/* ---- Ping ring: the attention cue for "you can act here" pills ----
   Add .bk-ping to a positioned pill; never animate the pill itself. */
.bk-ping::after { content: ""; position: absolute; inset: -7px; border-radius: 999px; border: 3px solid var(--press-glow); box-shadow: 0 0 16px var(--press-glow), inset 0 0 10px rgba(244,171,154,.45); animation: bk-ping 1.5s ease-out infinite; pointer-events: none; }
@keyframes bk-ping { 0% { opacity: .9; transform: scale(.82); } 72%, 100% { opacity: 0; transform: scale(1.28); } }

/* ---- Inputs: focus ring in friendly sky ---- */
.bk-field:focus {
  outline: none;
  border-color: var(--focus-ring) !important;
  box-shadow: 0 0 0 3px var(--info-bg);
}
.bk-field::placeholder { color: var(--text-muted); }

/* ---- Chip (selectable): selected = pressed-in, no longer clickable-looking ---- */
.bk-chip { transform: translateY(-1px); transition: transform var(--dur-fast) var(--ease-bounce), background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-fast) var(--ease-bounce); }
.bk-chip:hover { transform: translateY(1px); background: var(--press-fill) !important; color: var(--press-contrast) !important; }
.bk-chip[aria-pressed="true"], .bk-chip.on { transform: translateY(2px); box-shadow: var(--shadow-pop-flat); pointer-events: none; }

/* ---- Card hover (when interactive) — cards still lift; they are surfaces, not buttons ---- */
.bk-card--hover { transition: transform var(--dur-base) var(--ease-bounce), box-shadow var(--dur-base) var(--ease-soft); cursor: pointer; }
.bk-card--hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* ---- Switch ---- */
.bk-switch__knob { transition: transform var(--dur-base) var(--ease-bounce); }

@media (prefers-reduced-motion: reduce) {
  .bki, .bk-ping::after, .bk-sparks i { animation: none !important; }
}