/* Loka Design System -- rebuilt canonical (Phase 17.2).
 * Lifted bottom-up from prototype/slices/loka-{onboarding-step,lobby,fof-panel}/
 * + DSX-01..16 resolved per Plan-01 SUMMARY / DSX Resolution Log.
 * ============================================================
 * Token naming is byte-stable vs. previous canonical so surface
 * plans do not need to chase renames.
 * ============================================================ */

:root {
  /* ── Surface · cream stack (daylight) ────────────────────── */
  --loka-cream:        #f8efd9;  /* primary surface, paper */
  --loka-cream-2:      #efe3c6;  /* second surface, cards */
  --loka-cream-3:      #e6d6ad;  /* tertiary, sunk surface */
  --loka-paper-grain:  rgba(58, 40, 34, 0.04);

  /* ── Ink · text + outlines ───────────────────────────────── */
  --loka-ink:          #2a1d1a;  /* body, outlines on cream */
  --loka-ink-soft:     #5a3f34;  /* secondary text */
  --loka-ink-mute:     #876b5d;  /* meta, captions */
  --loka-rule:         #c9b58a;  /* hairlines on cream */
  --loka-rule-dark:    #3a2822;  /* hand-shadow borders */

  /* ── Brand · terracotta + gold ───────────────────────────── */
  --loka-terracotta:       #d07a3f;  /* primary · Lo's body */
  --loka-terracotta-deep:  #a85a28;  /* primary pressed */
  --loka-gold:             #f0b84a;  /* Lo's lantern · brand */
  --loka-success:          #4a7c3f;  /* moss green · correct-answer check (999.54 U9 mandate; tokenized 2026-08-28 from the sanctioned literal) */
  --loka-gold-soft:        #ffd97a;  /* lantern hot core */
  --loka-gold-deep:        #c08a28;  /* gold pressed */

  /* ── Stage · indigo (evening, world) ─────────────────────── */
  --loka-indigo:       #20183a;  /* world stage */
  --loka-indigo-deep:  #150f28;  /* container · night */
  --loka-indigo-soft:  #2a1d4a;  /* indigo highlight */

  /* ── Signal · ember (alerts only) ────────────────────────── */
  --loka-ember:        #c8384a;  /* honest red · alerts */
  --loka-ember-soft:   #f5e3df;  /* ember-tinted surface */

  /* ── Petal · accents inside Lo + characters ──────────────── */
  --loka-petal:        #f4b8c8;  /* Lo's cheek, soft accent */

  /* ── Shadows · the hand-shadow system ────────────────────── */
  --loka-shadow:       rgba(42, 29, 26, 0.18);
  --loka-shadow-hard:  rgba(42, 29, 26, 0.55);
  --loka-shadow-soft:  rgba(42, 29, 26, 0.08);

  /* ── Hand-shadow card offsets ────────────────────────────── */
  --loka-card-shadow-sm:   2px 2px 0 var(--loka-shadow-hard);
  --loka-card-shadow-md:   3px 3px 0 var(--loka-shadow-hard);
  --loka-card-shadow-lg:   4px 4px 0 var(--loka-shadow-hard);
  --loka-card-shadow-xl:   6px 6px 0 var(--loka-shadow-hard);

  /* ── Border weight (the "hand-drawn" outline) ────────────── */
  --loka-border-1: 1px solid var(--loka-rule-dark);
  --loka-border-2: 2px solid var(--loka-rule-dark);
  --loka-border-hairline: 1.5px solid var(--loka-rule-dark);         /* dense-panel chrome (phrasebook tiles/slots; sanctioned 2026-08-28) */
  --loka-border-hairline-dashed: 1.5px dashed var(--loka-rule-dark);
  --loka-border-3: 3px solid var(--loka-rule-dark);

  /* DSX-09: dashed border composite for wait/confirmation states */
  --loka-border-1-dashed: 1px dashed var(--loka-rule-dark);

  /* ── Type slots ──────────────────────────────────────────── */
  --loka-font-serif:  "Instrument Serif", Georgia, serif;
  --loka-font-pixel:  "Press Start 2P", monospace;
  --loka-font-mono:   "JetBrains Mono", ui-monospace, monospace;
  --loka-font-vt:     "VT323", "JetBrains Mono", monospace;
  --loka-font-l2-ko:  "Nanum Gothic Coding", "JetBrains Mono", monospace;

  /* ── Type scale ──────────────────────────────────────────── */
  --loka-text-xs:   11px;   /* meta, eyebrow */
  --loka-text-note: 13px;   /* annotation tier: legend descriptions, detail sublines (fills the 11->16 gap; minted 2026-08-28) */
  --loka-text-sm:   16px;   /* narration-tier (DSX-11: gap fill between xs and md) */
  --loka-text-base: 16px;   /* body, second-tier (alias for sm; backward compat) */
  --loka-text-md:   19px;   /* serif body */
  --loka-text-lg:   21px;   /* lede */
  --loka-text-xl:   28px;   /* h3 oversize / pull-quote */
  --loka-text-2xl:  38px;   /* h2 */
  --loka-text-3xl:  44px;   /* h1 hero */

  /* Pixel + mono labels ride small. */
  --loka-text-pixel-xs:  8px;   /* fox captions */
  --loka-text-pixel-sm:  9px;   /* tags */
  --loka-text-pixel-md: 10px;   /* step number, button */
  --loka-text-pixel-lg: 11px;   /* hud */
  --loka-text-pixel-xl: 14px;   /* hero PTT label (Phase 18.1 D-10) */

  /* ── Tracking · capital letters / pixel use loose tracking ─ */
  --loka-track-pixel:    0.10em;  /* base pixel tracking */
  --loka-track-pixel-sm: 0.12em;  /* DSX-08: auth eyebrow */
  --loka-track-pixel-md: 0.16em;  /* DSX-08: OAuth label, auth-label */
  --loka-track-pixel-lg: 0.18em;  /* DSX-08: auth submit, fof-mark */
  --loka-track-mono:     0.20em;
  --loka-track-eye:      0.30em;

  /* ── Spacing (the four-beat scale) ───────────────────────── */
  --loka-space-1:   4px;
  --loka-space-2:   8px;
  --loka-space-3:  12px;
  --loka-space-4:  16px;
  --loka-space-5:  22px;
  --loka-space-6:  28px;
  --loka-space-7:  36px;
  --loka-space-8:  48px;
  --loka-space-9:  72px;
  --loka-space-10: 96px;

  /* ── Radii (LOKA uses sharp corners; chips only) ────────── */
  --loka-radius-0:   0;
  --loka-radius-1:   2px;
  --loka-radius-pill: 999px;

  /* ── Interaction · tap-target floor ──────────────────────── */
  /* [ONBOARD-89] D-15: the ordinary touch-target convention (44x44)
     applied wherever DS chrome exposes a discrete tap control. */
  --loka-tap-min: 44px;

  /* ── Motion · idle loop cadences ─────────────────────────── */
  --loka-anim-breathe:  3.4s;
  --loka-anim-tilt:     3.6s;
  --loka-anim-speak:    0.55s;
  --loka-anim-hop:      2.4s;
  --loka-anim-sleep:    4.0s;
  --loka-anim-listen:   2.2s;

  /* ── Lo sprite scale tiers ───────────────────────────────── */
  --loka-lo-hero:       3;     /* 24x20 fox @ scale 3 = 72px */
  --loka-lo-large:      2.4;   /* onboarding narrator ~58px (legacy; keep value) */
  --loka-lo-corner:     2;     /* always-on lobby ~32px (small fox) */
  --loka-lo-tutor:      2.2;   /* chat header ~36px */
  --loka-lo-interview:  4;     /* DSX-05: center-stage onboarding hero (first-meet only) */

  /* ── DSX-15: cream-gold bridge token ─────────────────────── */
  /* Sits between --loka-cream-3 (#e6d6ad) and --loka-gold (#f0b84a).
     Used by .fof-msg--you bubble; NOT a color-mix derivation --
     the slice value #efd9ad is an intentional intentional design choice. */
  --loka-cream-gold: #efd9ad;

  /* ── DSX-10: scene overlay tint + vignette ───────────────── */
  /* Derived from --loka-indigo-deep per slice-DS §4 "derive tints" rule.
     The 120px spread is preserved literally inside the token value. */
  --loka-scene-tint: linear-gradient(180deg, color-mix(in oklab, var(--loka-indigo-deep) 5%, transparent) 0%, transparent 30%, color-mix(in oklab, var(--loka-indigo-deep) 55%, transparent) 100%);
  --loka-scene-vignette: inset 0 0 120px color-mix(in oklab, var(--loka-indigo-deep) 50%, transparent);

  /* ── DSX-01: motion family (promoted from design-tokens-app.css) ── */
  --motion-panel:         220ms ease;
  --motion-toast:         260ms ease;
  --motion-task-layer:    500ms ease;
  --motion-tod-crossfade: 550ms ease;
  --motion-scene-fade:    450ms ease;
  --motion-flip-card:     500ms cubic-bezier(0.25, 0.8, 0.3, 1);

  /* DSX-04: anchor-surface recompose -- reconcile to tod-crossfade.
     Recompose is visually a crossfade; no new duration warranted per [UI-PRIN-20]. */
  /* anchor-recompose consumers: use --motion-tod-crossfade */

  /* DSX-06: screen-fade shared primitive (onboarding-step + tour-stop + auth-overlay) */
  --motion-screen-fade:   280ms ease;

  /* DSX-14: FoF press interaction (PTT) + panel mount */
  --motion-press:         80ms ease;
  /* FoF panel mount/exit consumers: use --motion-panel (per [UI-LOBBY-04]) */

  /* ── DSX-02: z-index stack (promoted from design-tokens-app.css) ── */
  --z-world:      1;
  --z-world-tint: 2;
  --z-ambient:    20;
  --z-characters: 30;
  --z-hud:        60;
  --z-volley:     65;
  --z-task:       70;
  --z-scrim:      90;
  --z-overlay:    100;
  /* Phase 18 Plan 18-04 re-parented #toast-layer from #world to <body> so
     toasts can paint over Settings/Welcome/Onboarding surfaces. The DOM
     re-parent shipped but this token was left at 80, below --z-overlay,
     so save-toasts rendered hidden behind the Settings + Dashboard panels.
     Bumped above overlays; stays below --z-scene-fade so mid-transition
     toasts don't overlap fades. */
  --z-toast:      150;
  --z-scene-fade: 180;
  --z-boot:       200;

  /* ── DSX-03: scrim + overlay-glass (promoted from design-tokens-app.css) ── */
  --modal-scrim:         rgba(8, 4, 16, 0.55);
  --overlay-glass:       rgba(12, 8, 22, 0.82);
  /* DSX-07: stronger scrim for auth-overlay over high-noise splash backdrop */
  --modal-scrim-strong:  rgba(8, 4, 16, 0.78);
  /* Phrasebook hint overlay (999.54 Task 11): --modal-scrim is a cool
     indigo-black tuned for the world/auth surfaces, but the phrasebook
     panel is warm cream + ink -- that cool scrim read as an unstyled
     default dropped in from another app. --loka-scrim reuses --loka-ink's
     own RGB (42, 29, 26) at partial opacity so the dim reads as this room
     going dark, not a different palette bleeding through. */
  --loka-scrim: rgba(42, 29, 26, 0.72);

  /* Ember coal gradient stops. The phrasebook's progress glyph is a coal
     that catches and then burns; its "catching" and "lit" states need
     shades between the gold and terracotta ramps that no existing token
     carries. Defined here rather than inline in the component so the
     token-discipline gate holds -- the values are unchanged, only their
     home moved. */
  --loka-ember-catch-hot:  #e7b878;
  --loka-ember-catch-mid:  #c07a45;
  --loka-ember-catch-edge: #8a5230;
  --loka-ember-lit-hot:    #fff0c2;
}

/* ── Base body · paper grain background ──────────────────── */
.loka-body {
  font-family: var(--loka-font-serif);
  background: var(--loka-cream);
  color: var(--loka-ink);
  line-height: 1.45;
  font-size: var(--loka-text-md);
  background-image:
    radial-gradient(circle at 20% 20%, rgba(58,40,34,0.035) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 60%, rgba(58,40,34,0.030) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 85%, rgba(58,40,34,0.025) 0 1px, transparent 2px);
  background-size: 7px 7px, 11px 11px, 13px 13px;
}

/* ── Heading primitives ─────────────────────────────────── */
/* Per [UI-PRIN-37] DS contract: spec authors and slice mockups should reach
   for these semantic classes instead of inlining font-family + size + tracking
   on every <h*>. Maps to the existing --loka-text-{xl,2xl,3xl} scale. */
.loka-h1 {
  font-family: var(--loka-font-serif);
  font-size: var(--loka-text-3xl);    /* 44px */
  line-height: 1.05;
  color: var(--loka-ink);
  margin: 0 0 var(--loka-space-3);
}
.loka-h2 {
  font-family: var(--loka-font-serif);
  font-size: var(--loka-text-2xl);    /* 38px */
  line-height: 1.1;
  color: var(--loka-ink);
  margin: 0 0 var(--loka-space-3);
}
.loka-h3 {
  font-family: var(--loka-font-serif);
  font-size: var(--loka-text-xl);     /* 28px */
  line-height: 1.15;
  color: var(--loka-ink);
  margin: 0 0 var(--loka-space-2);
}

/* ── Body-text element class ────────────────────────────── */
/* For applying body-copy treatment to non-<body> elements (cards, panels,
   sub-page slots) without re-declaring serif + ink + line-height each time. */
.loka-body-text {
  font-family: var(--loka-font-serif);
  font-size: var(--loka-text-md);     /* 19px */
  line-height: 1.45;
  color: var(--loka-ink);
}

/* ── Type face utilities ─────────────────────────────────── */
.pixel  { font-family: var(--loka-font-pixel); letter-spacing: 0.04em; }
.mono   { font-family: var(--loka-font-mono); }
.vt     { font-family: var(--loka-font-vt); }
.serif  { font-family: var(--loka-font-serif); }

/* Pixel art must stay pixel-perfect, never resampled. */
.loka-pixel-art { image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; }

/* ── Card · the hand-shadow surface ──────────────────────── */
.loka-card {
  background: var(--loka-cream-2);
  border: var(--loka-border-2);
  box-shadow: var(--loka-card-shadow-lg);
  padding: var(--loka-space-5) var(--loka-space-5);
}
.loka-card--accent { border-color: var(--loka-terracotta-deep); }
.loka-card--alert  { border-color: var(--loka-ember); background: var(--loka-ember-soft); }
.loka-card--night  { background: var(--loka-indigo-deep); color: var(--loka-cream); border: var(--loka-border-3); box-shadow: var(--loka-card-shadow-xl); }
.loka-card--paper  { background: var(--loka-cream); }

/* ── Button · pixel-label, hand-shadow ───────────────────── */
.loka-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--loka-font-pixel);
  font-size: var(--loka-text-pixel-md);
  letter-spacing: var(--loka-track-pixel);
  text-transform: uppercase;
  padding: 12px 18px;
  background: var(--loka-cream);
  color: var(--loka-ink);
  border: var(--loka-border-2);
  box-shadow: var(--loka-card-shadow-md);
  cursor: pointer;
  transition: transform var(--motion-press), box-shadow var(--motion-press);
  user-select: none;
}
.loka-btn:hover  { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--loka-shadow-hard); }
.loka-btn:active { transform: translate(2px,2px);  box-shadow: 1px 1px 0 var(--loka-shadow-hard); }
.loka-btn--primary { background: var(--loka-terracotta); color: var(--loka-cream); }
.loka-btn--ghost   { background: transparent; box-shadow: none; border-style: dashed; }
.loka-btn--quiet   { background: var(--loka-cream-2); }

/* ── Tag · pixel monogram for sections ───────────────────── */
.loka-tag {
  font-family: var(--loka-font-pixel);
  font-size: var(--loka-text-pixel-sm);
  color: var(--loka-terracotta-deep);
  letter-spacing: var(--loka-track-pixel);
  text-transform: uppercase;
}
/* Tag color variants — compose with .loka-tag base. */
.loka-tag--terracotta {
  background: rgba(208, 122, 63, 0.10);    /* --loka-terracotta @ 10% */
  padding: 4px 8px;
  border-radius: 2px;
}
.loka-tag--gold {
  color: var(--loka-gold-deep);             /* overrides base terracotta-deep */
  background: rgba(240, 184, 74, 0.18);     /* --loka-gold @ 18% */
  padding: 4px 8px;
  border-radius: 2px;
}

/* ── Section number · meta eyebrow ───────────────────────── */
.loka-num {
  font-family: var(--loka-font-mono);
  font-size: 12px;
  letter-spacing: var(--loka-track-eye);
  color: var(--loka-terracotta-deep);
  text-transform: uppercase;
}

/* ── Pull quote ──────────────────────────────────────────── */
.loka-pull {
  padding: var(--loka-space-6) var(--loka-space-7);
  border-left: 4px solid var(--loka-terracotta);
  background: var(--loka-cream-2);
  font-style: italic;
  font-size: var(--loka-text-xl);
  line-height: 1.25;
  color: var(--loka-ink);
}

/* ── Dashed hairline rule ────────────────────────────────── */
.loka-rule {
  border: none; height: 1px;
  background: repeating-linear-gradient(90deg, var(--loka-rule) 0 4px, transparent 4px 8px);
}

/* ── Stamp · for "not final" / status badges ─────────────── */
.loka-stamp {
  display: inline-block;
  transform: rotate(-4deg);
  padding: 6px 12px 5px;
  border: 2px solid var(--loka-terracotta-deep);
  color: var(--loka-terracotta-deep);
  font-family: var(--loka-font-pixel);
  font-size: var(--loka-text-pixel-sm);
  letter-spacing: 0.15em;
  background: rgba(208,122,63,0.08);
}
/* Stamp rotation variant — stronger angle for corner / sticker placement.
   Base .loka-stamp is -4deg; --rotated is more theatrical for "LO APPROVED"
   style status badges. */
.loka-stamp--rotated {
  transform: rotate(-12deg);
}

/* ── Lo motion library (idle loops, layered with sprite) ─── */
@keyframes loBreathe { 0%,100%{transform:translateY(0) scaleY(1);} 50%{transform:translateY(-2px) scaleY(0.985);} }
@keyframes loTilt    { 0%,100%{transform:rotate(0);} 35%{transform:rotate(-7deg);} 65%{transform:rotate(5deg);} }
@keyframes loSpeakNod{ 0%,100%{transform:translateY(0);} 25%{transform:translateY(-1px);} 50%{transform:translateY(0);} 75%{transform:translateY(-2px);} }
@keyframes loHop     { 0%,70%,100%{transform:translateY(0) scaleY(1);} 78%{transform:translateY(0) scaleY(0.9) scaleX(1.06);} 85%{transform:translateY(-10px) scaleY(1.04) scaleX(0.97);} 92%{transform:translateY(0) scaleY(0.92) scaleX(1.04);} }
@keyframes loSleep   { 0%,100%{transform:translateY(0) scaleY(1);} 50%{transform:translateY(1px) scaleY(0.97);} }
@keyframes loListen  { 0%,100%{transform:translateY(0) rotate(0);} 20%{transform:translateY(-1px) rotate(-2deg);} 50%{transform:translateY(0) rotate(0);} 70%{transform:translateY(-1px) rotate(2deg);} }
.lo-breathe { animation: loBreathe var(--loka-anim-breathe) ease-in-out infinite; transform-origin:50% 100%; display:inline-block; }
.lo-tilt    { animation: loTilt    var(--loka-anim-tilt)    ease-in-out infinite; transform-origin:50% 80%;  display:inline-block; }
.lo-speak   { animation: loSpeakNod var(--loka-anim-speak)  ease-in-out infinite; display:inline-block; }
.lo-hop     { animation: loHop     var(--loka-anim-hop)     ease-in-out infinite; transform-origin:50% 100%; display:inline-block; }
.lo-sleep   { animation: loSleep   var(--loka-anim-sleep)   ease-in-out infinite; transform-origin:50% 100%; display:inline-block; }
.lo-listen  { animation: loListen  var(--loka-anim-listen)  ease-in-out infinite; transform-origin:50% 90%;  display:inline-block; }

/* ── Lantern halo states ─────────────────────────────────── */
@keyframes loLanternFlicker { 0%,100%{opacity:.85; transform:scale(1);} 25%{opacity:.6; transform:scale(.94);} 50%{opacity:1; transform:scale(1.08);} 75%{opacity:.75; transform:scale(.98);} }
@keyframes loLanternBright  { 0%,100%{opacity:1; transform:scale(1.15);} 50%{opacity:.85; transform:scale(1.30);} }
@keyframes loLanternDim     { 0%,100%{opacity:.35; transform:scale(.85);} 50%{opacity:.50; transform:scale(.92);} }

/* ── Lo decorations · dots · waves · sparkles · z ────────── */
@keyframes loDot     { 0%,100%{opacity:.3; transform:translateY(0);} 50%{opacity:1; transform:translateY(-3px);} }
.lo-dots             { display:flex; gap: 5px; position: absolute; top: 18%; left: 52%; }
.lo-dots span        { width: 6px; height: 6px; background: var(--loka-gold); border: 2px solid var(--loka-rule-dark); animation: loDot 1.2s ease-in-out infinite; display:inline-block; }
.lo-dots span:nth-child(2){ animation-delay: .2s; }
.lo-dots span:nth-child(3){ animation-delay: .4s; }

@keyframes loWavePulse { 0%{transform:scale(.7); opacity:0;} 20%{opacity:.85;} 100%{transform:scale(1.6); opacity:0;} }
.lo-wave              { position:absolute; border:2px solid var(--loka-gold); border-radius:50%; pointer-events:none; animation: loWavePulse 1.6s ease-out infinite; width: 36px; height: 36px; top: 30%; right: -8px; }
.lo-wave.d1           { animation-delay: .4s; }
.lo-wave.d2           { animation-delay: .8s; }

@keyframes loSparkle  { 0%{opacity:0; transform:translate(0,0) scale(.4);} 20%{opacity:1; transform:translate(var(--dx,0), var(--dy,-10px)) scale(1);} 100%{opacity:0; transform:translate(calc(var(--dx,0) * 1.6), calc(var(--dy,-10px) * 1.6)) scale(.6);} }
.lo-spark             { position:absolute; width:6px; height:6px; background: var(--loka-gold-soft); border:1.5px solid var(--loka-rule-dark); animation: loSparkle 1.4s ease-out infinite; }

@keyframes loZ        { 0%{opacity:0; transform:translate(0,0) scale(.6);} 25%{opacity:1;} 100%{opacity:0; transform:translate(14px,-22px) scale(1.2);} }
.lo-z                 { position:absolute; font-family: var(--loka-font-pixel); font-size: 11px; color: var(--loka-gold); text-shadow: 1px 1px 0 var(--loka-rule-dark); animation: loZ 3s ease-in-out infinite; }