/* DreamBug UI kit: design tokens.
   Every value here comes from the live app (pipeline-lab/books/build_app.py) and the brand kit
   (brand-kit/02-colour/palette.css). Components use tokens ONLY, never hex literals.
   Two naming layers: the DreamBug names (--db-*) and a generic alias layer (--bg, --fg, --accent...)
   so frontendmaxxing snippets re-theme to DreamBug without edits. */
@import url("../assets/textures/worlds.css");

:root{
  /* ---- brand core ---- */
  --db-navy-plate:#0c102e;        /* brand plate, deepest navy */
  --db-ground:#10122a;            /* app dark ground */
  --db-night-top:#23284e;         /* night gradient: top of the sky */
  --db-night-bottom:#12142c;      /* night gradient: horizon */
  --db-card:#191d3a;              /* raised card on navy (parent cards, sheets) */
  --db-card-2:#252a4c;            /* inputs, keypad keys, bubble keys */
  --db-stage-deep:#080915;
  --db-ink:#f6f1df;               /* cream: all text on navy */
  --db-muted:#b9bce0;             /* secondary text on navy */
  --db-gold:#ffce5c;              /* THE accent. never a background field */
  --db-gold-2:#f7a93b;            /* gold gradient end */
  --db-gold-pale:#ffd27a;
  --db-gold-ink:#b0700f;          /* gold text on light grounds */
  --db-on-gold:#241a05;           /* ink on gold buttons */
  --db-cream:#fff8e8;             /* the chat bubble / tour bubble */
  --db-page:#f4edd9;              /* paper page */
  --db-page-shadow:#d8ccae;
  --db-caption:#fff6e0;           /* reader caption text */
  --db-ink-light:#1b2440;         /* text on light grounds (and on the cream bubble) */
  --db-muted-light:#4a4f6e;

  /* ---- book leathers (spines + bindings) ---- */
  --db-leather-navy:#182a5e; --db-leather-forest:#1f4d3a; --db-leather-oxblood:#6b1f2e;
  --db-leather-plum:#3a2960; --db-leather-teal:#164a55; --db-leather-chestnut:#5a3419;
  --db-spine-gold:#f4dc8a; --db-spine-rule:#d9b46a;

  /* ---- age tags ---- */
  --db-age-2-4:#f0a35e; --db-age-4-5:#ff8a7a; --db-age-5-6:#33c1a0; --db-age-6-7:#4aa3f0;

  /* ---- semantic ---- */
  --db-free:#2fbf71;              /* FREE chip, done */
  --db-destructive:#e8552e;
  --db-focus:#ffce5c;

  /* ---- the 16 worlds (gradient stops); patterns live in assets/textures/worlds.css ---- */
  --db-world-fireflies-a:#1e2a4a; --db-world-fireflies-b:#141c33;
  --db-world-sky-a:#bee3f8;   --db-world-sky-b:#90cdf4;
  --db-world-lagoon-a:#7fd8d4; --db-world-lagoon-b:#4fbfba;
  --db-world-polka-a:#fff6e7; --db-world-polka-b:#fdefd9;
  --db-world-blossom-a:#f9dce9; --db-world-blossom-b:#e4d3f2;
  --db-world-mint-a:#cbead6;  --db-world-mint-b:#a5dbc0;
  --db-world-coral-a:#f2907e; --db-world-coral-b:#f7b29a;
  --db-world-star-a:#10162a;  --db-world-star-b:#0b0f1e;
  --db-world-shelf-a:#f5e6cf; --db-world-shelf-b:#e9d3b2;
  --db-world-dino-a:#eef4dc;  --db-world-dino-b:#dfe8c2;
  --db-world-storm-a:#1a2240; --db-world-storm-b:#0e1428;
  --db-world-space-a:#171a3d; --db-world-space-b:#0a0b1c;
  --db-world-reef-a:#0d3242;  --db-world-reef-b:#061a26;
  --db-world-jungle-a:#e6f0d0; --db-world-jungle-b:#cfe3b0;
  --db-world-castle-a:#eae7f8; --db-world-castle-b:#d6d6ef;
  --db-world-snow-a:#1c2244;  --db-world-snow-b:#0d1128;

  /* ---- type: Baloo 2 is the whole system (500 body, 600 UI, 700 headings, 800 display) ---- */
  --db-font:"Baloo 2", ui-rounded, system-ui, sans-serif;
  --db-fs-display:clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem);  /* hero headline */
  --db-fs-h2:clamp(2.1rem, 1.45rem + 2.5vw, 3.4rem);        /* section headline */
  --db-fs-h3:clamp(1.35rem, 1.15rem + .8vw, 1.8rem);
  --db-fs-lead:clamp(1.12rem, 1.02rem + .45vw, 1.35rem);
  --db-fs-body:1.0625rem;         /* 17px */
  --db-fs-small:.9375rem;         /* 15px */
  --db-fs-label:.75rem;           /* small caps labels, tracked */
  --db-lh-tight:1.04; --db-lh-head:1.12; --db-lh-body:1.55;
  --db-track-label:.12em;

  /* ---- space (4px base) ---- */
  --db-s1:.25rem; --db-s2:.5rem; --db-s3:.75rem; --db-s4:1rem; --db-s5:1.5rem; --db-s6:2rem;
  --db-s7:3rem; --db-s8:4rem; --db-s9:6rem; --db-s10:8rem;
  --db-section-y:clamp(4.5rem, 3rem + 6vw, 9rem);
  --db-container:1200px; --db-gutter:clamp(1.25rem, .6rem + 3vw, 3rem);

  /* ---- radius (from the app: 12 inputs, 16 keys, 20 cards and bubbles, 999 pills) ---- */
  --db-r-sm:12px; --db-r-md:16px; --db-r-lg:20px; --db-r-xl:28px; --db-r-pill:999px;

  /* ---- elevation (two-layer shadows, tinted navy, never grey) ---- */
  --db-shadow-1:0 1px 0 rgba(255,255,255,.06) inset, 0 6px 16px rgba(4,6,20,.35);
  --db-shadow-2:0 1px 0 rgba(255,255,255,.07) inset, 0 18px 40px rgba(4,6,20,.45), 0 2px 6px rgba(4,6,20,.3);
  --db-shadow-3:0 30px 80px rgba(4,6,20,.55), 0 8px 20px rgba(4,6,20,.35);
  --db-glow-gold:0 0 0 3px var(--db-gold), 0 0 22px 6px rgba(255,206,92,.38);
  --db-border:1px solid rgba(255,255,255,.12);
  --db-border-strong:1.5px solid rgba(255,255,255,.18);

  /* ---- motion (blessed durations; everything honours prefers-reduced-motion) ---- */
  --m-dur-fast:160ms; --m-dur:280ms; --m-dur-slow:480ms;
  --m-ease:cubic-bezier(.2,.7,.2,1);            /* settle: the app's page and card moves */
  --m-ease-spring:cubic-bezier(.3,1.5,.5,1);    /* press spring-back */
  --m-ease-in:cubic-bezier(.5,0,.85,.4);

  /* ---- generic alias layer (frontendmaxxing / any snippet) ---- */
  --bg:var(--db-night-bottom); --surface:var(--db-card); --surface-2:var(--db-card-2);
  --fg:var(--db-ink); --fg-muted:var(--db-muted); --accent:var(--db-gold); --accent-2:var(--db-gold-2);
  --on-accent:var(--db-on-gold); --border:rgba(255,255,255,.12); --radius:var(--db-r-lg);
  --font-body:var(--db-font); --font-display:var(--db-font);
}

/* A light world section flips ink and surfaces, exactly as the app's light worlds do. */
.db-light{
  --fg:var(--db-ink-light); --fg-muted:var(--db-muted-light); --surface:#ffffff; --surface-2:#f3eee0;
  --border:rgba(27,36,64,.14); --accent:var(--db-gold); --db-heading-accent:var(--db-gold-ink);
  color:var(--fg);
}