lanre-ds 0.0.0-stage → 0.2.0

package/tokens/colors.css

@@ -0,0 +1,140 @@
+/* Lanre color tokens. Base ramps in oklch (100 = lightest, 900 = darkest), then semantic aliases. */
+:root {
+  /* Meadow: environment green (grass, bushes, board tiles) */
+  --green-100: oklch(0.94 0.08 128);
+  --green-300: oklch(0.85 0.17 132);
+  --green-500: oklch(0.74 0.19 136);
+  --green-700: oklch(0.58 0.16 140);
+  --green-900: oklch(0.40 0.10 142);
+
+  /* Sky: action blue (play, current level, water) */
+  --blue-100: oklch(0.94 0.05 228);
+  --blue-300: oklch(0.83 0.11 232);
+  --blue-500: oklch(0.68 0.17 240);
+  --blue-700: oklch(0.52 0.17 250);
+  --blue-900: oklch(0.36 0.12 255);
+
+  /* Gold: reward, currency, stars, primary CTA */
+  --gold-100: oklch(0.97 0.06 92);
+  --gold-300: oklch(0.92 0.14 90);
+  --gold-500: oklch(0.86 0.17 85);
+  --gold-700: oklch(0.71 0.16 68);
+  --gold-900: oklch(0.44 0.10 58);
+
+  /* Coral: danger, urgency, hearts, notification */
+  --coral-100: oklch(0.94 0.04 30);
+  --coral-300: oklch(0.83 0.11 30);
+  --coral-500: oklch(0.68 0.20 30);
+  --coral-700: oklch(0.55 0.19 28);
+  --coral-900: oklch(0.38 0.13 26);
+
+  /* Teal: confirm / OK / positive secondary */
+  --teal-100: oklch(0.95 0.04 185);
+  --teal-300: oklch(0.88 0.09 184);
+  --teal-500: oklch(0.76 0.13 180);
+  --teal-700: oklch(0.58 0.11 182);
+  --teal-900: oklch(0.40 0.08 184);
+
+  /* Berry: premium, boosts, special offers */
+  --berry-100: oklch(0.95 0.04 340);
+  --berry-300: oklch(0.85 0.11 340);
+  --berry-500: oklch(0.66 0.22 340);
+  --berry-700: oklch(0.50 0.20 340);
+  --berry-900: oklch(0.34 0.13 340);
+
+  /* Wood: frames, fences, signposts */
+  --wood-100: oklch(0.93 0.06 80);
+  --wood-300: oklch(0.80 0.10 70);
+  --wood-500: oklch(0.62 0.12 60);
+  --wood-700: oklch(0.46 0.10 54);
+  --wood-900: oklch(0.30 0.07 50);
+
+  /* Stone: locked, disabled, inactive */
+  --stone-100: oklch(0.96 0.01 250);
+  --stone-300: oklch(0.86 0.02 250);
+  --stone-500: oklch(0.71 0.03 250);
+  --stone-700: oklch(0.55 0.04 255);
+  --stone-900: oklch(0.36 0.04 260);
+
+  /* Parchment: panel surfaces */
+  --cream-50:  oklch(0.99 0.01 85);
+  --cream-100: oklch(0.97 0.03 85);
+  --cream-200: oklch(0.93 0.05 80);
+  --cream-300: oklch(0.88 0.07 70);
+
+  /* Ink: warm brown text */
+  --ink-900: oklch(0.27 0.05 55);
+  --ink-700: oklch(0.41 0.06 55);
+  --ink-500: oklch(0.57 0.05 55);
+  --white: #ffffff;
+
+  /* Night: the summit letter and the credits, after dark above the clouds */
+  --night-ink: oklch(0.182 0.05 289.7);
+  --night-sky: oklch(0.229 0.064 289.9);
+  --night-lilac: oklch(0.807 0.067 303.7);
+  --night-cream: oklch(0.964 0.032 78.2);
+  --night-gold: oklch(0.8543 0.1685 86.58);
+  --night-gold-hi: oklch(0.91 0.138 94.4);
+
+  /* ---- Semantic aliases ---- */
+  --bg-meadow: linear-gradient(180deg, var(--green-300) 0%, var(--green-500) 100%);
+  --bg-sky: linear-gradient(180deg, oklch(0.78 0.11 232) 0%, oklch(0.92 0.05 220) 100%);
+  --bg-dusk: linear-gradient(180deg, oklch(0.52 0.14 290) 0%, oklch(0.72 0.13 40) 100%);
+  --bg-scrim: oklch(0.22 0.05 260 / 0.55);
+
+  --surface-panel: var(--cream-100);
+  --surface-panel-border: var(--cream-300);
+  --surface-panel-tab: var(--white);
+  --surface-inset: var(--cream-200);
+  --surface-hud: oklch(0.30 0.06 55 / 0.82);
+  --surface-cell: oklch(0.34 0.09 145 / 0.30);
+  --surface-cell-active: oklch(0.34 0.09 200 / 0.45);
+  --surface-wood: var(--wood-500);
+  --surface-wood-plank: var(--wood-100);
+
+  --text-primary: var(--ink-900);
+  --text-secondary: var(--ink-700);
+  --text-muted: var(--ink-500);
+  --text-on-dark: var(--white);
+  --text-on-gold: var(--gold-900);
+  --text-outline: var(--ink-900);
+  --text-outline-stone: var(--stone-700);
+  --text-outline-blue: var(--blue-700);
+
+  --action-primary: var(--gold-500);
+  --action-primary-shade: var(--gold-700);
+  --action-play: var(--blue-500);
+  --action-play-shade: var(--blue-700);
+  --action-confirm: var(--teal-500);
+  --action-confirm-shade: var(--teal-700);
+  --action-danger: var(--coral-500);
+  --action-danger-shade: var(--coral-700);
+  --action-premium: var(--berry-500);
+  --action-premium-shade: var(--berry-700);
+
+  --state-locked: var(--stone-500);
+  --state-locked-shade: var(--stone-700);
+  --state-current: var(--blue-500);
+  --state-complete: var(--green-500);
+  --state-perfect: var(--gold-500);
+
+  --star-fill: var(--gold-500);
+  --star-fill-light: var(--gold-300);
+  --star-outline: var(--gold-700);
+  --star-empty: var(--stone-500);
+  --star-empty-outline: var(--stone-700);
+
+  --currency-coin: var(--gold-500);
+  --currency-gem: var(--coral-500);
+  --currency-gem-alt: var(--blue-500);
+  --currency-heart: var(--coral-500);
+  --currency-energy: var(--teal-500);
+
+  --focus-ring: 0 0 0 4px oklch(0.86 0.17 85 / 0.85);
+
+  /* Step marker (.mp-step): the small numbered marker on the contributor trail, memory blocks and world signs.
+     highlight = the light spot on top, fill = the top surface, edge = the darker bevel underneath, outline = the stroke behind the number. */
+  --step-ahead-highlight: var(--stone-100); --step-ahead-fill: var(--stone-300); --step-ahead-edge: var(--stone-500); --step-ahead-outline: var(--stone-700);
+  --step-done-highlight: var(--green-300); --step-done-fill: var(--green-500); --step-done-edge: var(--green-700); --step-done-outline: var(--green-900);
+  --step-current-highlight: var(--blue-300); --step-current-fill: var(--blue-500); --step-current-edge: var(--blue-700); --step-current-outline: var(--blue-700);
+}

package/tokens/effects.css

@@ -0,0 +1,40 @@
+/* Lanre radii, borders, bevels, shadows, glows, motion. */
+:root {
+  --radius-xs: 6px;
+  --radius-sm: 10px;
+  --radius-md: 16px;
+  --radius-lg: 22px;
+  --radius-xl: 28px;
+  --radius-pill: 999px;
+
+  --border-panel: 4px;
+  --border-cell: 3px;
+  --border-hairline: 2px;
+
+  /* Bevel: every pressable has a solid darker bottom edge (a "0 Npx 0 shade" box-shadow) */
+  --bevel-sm: 3px;
+  --bevel-md: 5px;
+  --bevel-lg: 7px;
+  --press-travel: 4px;
+
+  --highlight-top: inset 0 2px 0 oklch(1 0 0 / 0.5);
+  --shadow-drop-sm: 0 4px 10px oklch(0.25 0.05 60 / 0.22);
+  --shadow-drop: 0 10px 24px oklch(0.25 0.05 60 / 0.28);
+  --shadow-panel: 0 20px 44px oklch(0.22 0.05 60 / 0.38);
+  --shadow-text: 0 2px 0 oklch(0 0 0 / 0.25);
+
+  /* The scrim behind a modal softens the world by this much. Surfaces never blur. */
+  --scrim-blur: 3px;
+
+  --glow-gold: 0 0 0 4px oklch(0.86 0.17 85 / 0.5), 0 0 28px oklch(0.86 0.17 85 / 0.7);
+  --glow-blue: 0 0 0 4px oklch(0.68 0.17 240 / 0.5), 0 0 28px oklch(0.68 0.17 240 / 0.7);
+  --glow-berry: 0 0 0 4px oklch(0.66 0.22 340 / 0.5), 0 0 28px oklch(0.66 0.22 340 / 0.7);
+
+  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --dur-fast: 120ms;
+  --dur-base: 220ms;
+  --dur-slow: 420ms;
+  --dur-idle: 2400ms;
+}

package/tokens/fonts.css

@@ -0,0 +1,3 @@
+/* Lanre webfonts: served from Google Fonts (no binaries were provided; see readme.md "Caveats").
+   Display: Titan One (single weight). UI: Quicksand 500/600/700. */
+@import url("https://fonts.googleapis.com/css2?family=Titan+One&family=Quicksand:wght@500;600;700&display=swap");

package/tokens/fx.css

@@ -0,0 +1,186 @@
+/* Effects and the loading screen: a confetti burst, a few twinkles, turning sun rays, and the boot screen.
+   Used by Confetti, Sparkles, Sunburst and LoadingScreen. The twinkle uses mp-sparkle from utilities.css. */
+
+/* ---------- Confetti ---------- */
+
+.mp-confetti {
+  position: absolute;
+  left: 50%;
+  top: 40%;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+  z-index: 5;
+}
+
+.mp-confetti span {
+  position: absolute;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  animation: mp-confetti-burst 1500ms cubic-bezier(0.15, 0.7, 0.3, 1) both;
+}
+
+@keyframes mp-confetti-burst {
+  0% { opacity: 1; transform: translate(0, 0) rotate(0) scale(0.4); }
+  70% { opacity: 1; }
+  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 160px)) rotate(var(--rot)) scale(1); }
+}
+
+/* ---------- Sparkles ---------- */
+
+.mp-sparkle-spot {
+  position: absolute;
+  color: var(--gold-300);
+  font-size: 22px;
+  text-shadow: 0 0 10px oklch(0.92 0.14 90 / 0.9);
+  pointer-events: none;
+  animation: mp-sparkle 1.6s ease-in-out infinite;
+  animation-delay: calc(var(--i, 0) * 260ms);
+  z-index: 1;
+}
+
+/* ---------- Sunburst ---------- */
+
+.mp-sunburst-motion { transform-origin: 0 0; }
+.mp-sunburst-motion[data-sunburst-motion='continuous'] { animation: mp-sunburst-turn var(--sunburst-duration, 120s) linear infinite; }
+.mp-sunburst-motion[data-sunburst-motion='once'] { animation: mp-sunburst-reveal var(--sunburst-duration, 2s) ease-out both; }
+@keyframes mp-sunburst-turn { to { transform: rotate(360deg); } }
+@keyframes mp-sunburst-reveal {
+  0% { opacity: 0; transform: rotate(-12deg) scale(0.85); }
+  25% { opacity: 1; }
+  100% { opacity: 0; transform: rotate(12deg) scale(1.05); }
+}
+@media (prefers-reduced-motion: reduce) { .mp-sunburst-motion { animation: none !important; } }
+
+/* ---------- Loading screen ---------- */
+
+.mp-loading {
+  position: relative;
+  min-height: 100dvh;
+  display: grid;
+  place-items: center;
+  overflow: hidden;
+  background: var(--bg-sky);
+}
+
+.mp-loading-stack {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  justify-items: center;
+  gap: 22px;
+  padding: 0 24px 120px;
+  max-width: 420px;
+}
+
+/* Boot bar: dark track, striped gold fill that grows and shrinks. */
+.mp-loading-track {
+  width: 180px;
+  height: 22px;
+  border-radius: 999px;
+  background: oklch(0.3 0.06 55 / 0.85);
+  border: 2px solid oklch(0.2 0.05 55 / 0.9);
+  box-shadow: inset 0 2px 4px oklch(0 0 0 / 0.35);
+  overflow: hidden;
+  margin-top: 26px;
+}
+
+.mp-loading-fill {
+  display: block;
+  position: relative;
+  height: 100%;
+  width: 60%;
+  border-radius: 999px;
+  background: linear-gradient(180deg, var(--gold-300), var(--gold-500) 55%, var(--gold-700));
+  animation: mp-loading-grow 1.6s var(--ease-out) infinite alternate;
+}
+
+.mp-loading-fill::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  opacity: 0.35;
+  background: repeating-linear-gradient(-55deg, transparent 0 8px, oklch(1 0 0 / 0.55) 8px 14px);
+}
+
+@keyframes mp-loading-grow {
+  from { width: 25%; }
+  to { width: 85%; }
+}
+
+.mp-loading-cloud {
+  position: absolute;
+  height: 26px;
+  border-radius: 999px;
+  background: oklch(1 0 0 / 0.85);
+  animation: mp-cloud-drift 18s linear infinite;
+}
+
+.mp-loading-cloud::before {
+  content: '';
+  position: absolute;
+  left: 22%;
+  top: -12px;
+  width: 40%;
+  height: 30px;
+  border-radius: 50%;
+  background: inherit;
+}
+
+.mp-loading-cloud-a { left: 8%; top: 10%; width: 96px; }
+.mp-loading-cloud-b { left: 70%; top: 18%; width: 72px; animation-duration: 24s; }
+.mp-loading-cloud-c { left: 40%; top: 6%; width: 56px; animation-duration: 30s; }
+
+@keyframes mp-cloud-drift {
+  from { translate: 0 0; }
+  to { translate: 40px 0; }
+}
+
+/* Mango Grove peeking in from below, with the road setting off. */
+.mp-loading-ground {
+  position: absolute;
+  left: -10%;
+  right: -10%;
+  bottom: -60px;
+  height: 200px;
+  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
+  background: linear-gradient(180deg, #c3e77f, #a6d85b 60%, #8cc446);
+  box-shadow: inset 0 6px 0 oklch(1 0 0 / 0.35);
+}
+
+.mp-loading-hill {
+  position: absolute;
+  left: 55%;
+  bottom: 70px;
+  width: 60%;
+  height: 160px;
+  border-radius: 50%;
+  background: #8cc446;
+  opacity: 0.6;
+}
+
+.mp-loading-road {
+  position: absolute;
+  left: 50%;
+  bottom: 0;
+  width: 70px;
+  height: 150px;
+  margin-left: -35px;
+  border-radius: 40px 40px 0 0;
+  background: #f6e1ad;
+  box-shadow: 0 0 0 6px #d8b173;
+  rotate: -12deg;
+  transform-origin: bottom;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mp-loading-fill,
+  .mp-loading-cloud,
+  .mp-sparkle-spot {
+    animation: none;
+  }
+  .mp-confetti {
+    display: none;
+  }
+}

package/tokens/gems.css

@@ -0,0 +1,8 @@
+/* Quiz gemstones. Score 0–2 → Amber I/II/III · 3–5 → Emerald · 6–8 → Amethyst · quiz skipped → Pearl keepsake (unranked).
+   Tier I plain · II adds a sparkle · III adds a halo (proposed: III keeps the sparkle too). Shape + name always accompany colour. */
+:root {
+  --gem-amber: oklch(0.80 0.16 70);    --gem-amber-light: oklch(0.92 0.12 85);    --gem-amber-deep: oklch(0.56 0.15 55);
+  --gem-emerald: oklch(0.70 0.18 155); --gem-emerald-light: oklch(0.86 0.14 150); --gem-emerald-deep: oklch(0.46 0.14 158);
+  --gem-amethyst: oklch(0.62 0.20 305);--gem-amethyst-light: oklch(0.80 0.13 310);--gem-amethyst-deep: oklch(0.40 0.16 300);
+  --gem-pearl: oklch(0.95 0.02 90);    --gem-pearl-light: #ffffff;                --gem-pearl-deep: oklch(0.76 0.04 260);
+}