/* ============ LAYER 1: primitives — the Robodod arcade palette ============ */
:root {
  --pal-night: #223047;
  --pal-night-soft: #46586F;
  --pal-night-faint: #7A8BA0;
  --pal-paper: #FDFBF4;
  --pal-sky: #E9F1F7;
  --pal-steel: #C9D7E4;
  --pal-steel-deep: #8FA6BB;
  --pal-bolt: #3E8DE3;
  --pal-bolt-deep: #2B66AC;
  --pal-grass: #57B368;
  --pal-grass-deep: #3B8A4C;
  --pal-blast: #F2842C;
  --pal-blast-deep: #C05F14;
  --pal-cyan: #29A3BE;
  --pal-cyan-deep: #1B7A8F;
  --pal-graphite: #55657A;
  --pal-graphite-deep: #3A4657;
  --pal-sun: #F7C948;
  --pal-sun-deep: #C99A1E;
  --pal-red: #D9534F;
  --pal-mint: #BDE3CE;
  --pal-cream: #FFF3D6;
}

/* ============ LAYER 2: semantic — components consume ONLY these ============ */
:root {
  --c-bg: var(--pal-sky);
  --c-surface: var(--pal-paper);
  --c-surface-2: #F0F5F9;
  --c-ink: var(--pal-night);
  --c-ink-soft: var(--pal-night-soft);
  --c-ink-faint: var(--pal-night-faint);
  --c-line: #D5E0E9;
  --c-accent: var(--pal-bolt);
  --c-accent-deep: var(--pal-bolt-deep);
  --c-accent-ink: #FFFFFF;
  --c-accent-soft: #DCEAFA;
  --c-pop: var(--pal-blast);
  --c-ok: var(--pal-grass-deep);
  --c-warn: var(--pal-sun-deep);
  --c-danger: var(--pal-red);
  --c-focus: var(--pal-bolt-deep);
  --c-shadow: #C2D2DF;
  --c-overlay: rgba(34, 48, 71, 0.5);
  --c-star: var(--pal-sun);

  /* chat senders */
  --who-kid: var(--pal-cream);
  --who-kid-ink: var(--pal-night);
  --who-robodod: var(--pal-paper);
  --who-robodod-ink: var(--pal-night);

  /* per-kid identity (theme-independent, used in avatars/leaderboards/group chat) */
  --kid-adam: var(--pal-grass);
  --kid-adam-deep: var(--pal-grass-deep);
  --kid-beeri: var(--pal-blast);
  --kid-beeri-deep: var(--pal-blast-deep);
  --kid-tom: var(--pal-cyan);
  --kid-tom-deep: var(--pal-cyan-deep);
  --kid-boss: var(--pal-graphite);
  --kid-boss-deep: var(--pal-graphite-deep);

  /* robot body */
  --bot-metal: var(--pal-steel);
  --bot-metal-deep: var(--pal-steel-deep);
  --bot-antenna: var(--pal-blast);

  /* status chips (wish pipeline) */
  --st-new: var(--pal-sun);
  --st-planned: var(--pal-bolt);
  --st-building: var(--pal-blast);
  --st-shipped: var(--pal-grass);
  --st-declined: var(--pal-graphite);

  /* radii — hand-cut sticker corners */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;
  --r-wonky: 18px 22px 16px 24px;
  --r-wonky-2: 22px 16px 24px 18px;
  --r-bubble-own: 18px 18px 6px 18px;
  --r-bubble-other: 18px 18px 18px 6px;

  /* borders + hard solid shadows (never blurred, never gradient) */
  --bw-thin: 1.5px;
  --bw-sticker: 2.5px;
  --bw-chunky: 3px;
  --shadow-pop: 0 3px 0 var(--c-shadow);
  --shadow-card: 0 4px 0 var(--c-shadow);
  --shadow-float: 0 10px 24px rgba(34, 48, 71, 0.18);

  /* spacing */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;

  /* type — kid-scale: a notch bigger than a grown-up app */
  --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-huge: 40px;
  --lh-tight: 1.25; --lh-body: 1.55;
  --font-display: 'Fredoka', 'Varela Round', sans-serif;
  --font-ui: 'Varela Round', 'Fredoka', -apple-system, sans-serif;

  /* motion */
  --t-fast: 120ms;
  --t-pop: 200ms;
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* layout */
  --tap-min: 48px;
  --topbar-h: 58px;
  --tabbar-h: 64px;
  --content-max: 640px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* solid-fill SVG patterns (gradient-free texture) */
  --pattern-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Ccircle cx='3' cy='3' r='2' fill='%23C2D2DF'/%3E%3C/svg%3E");
  --pattern-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M28 0H0v28' fill='none' stroke='%23D5E0E9' stroke-width='1.5'/%3E%3C/svg%3E");
  --pattern-stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M10 4l1.8 3.6L16 8.4l-3 2.9.7 4.1L10 13.5l-3.7 1.9.7-4.1-3-2.9 4.2-.8z' fill='%23DCEAFA'/%3E%3C/svg%3E");
}

/* ============ themes: each profile tints the app their color ============ */
html[data-theme='adam'] {
  --c-accent: var(--pal-grass);
  --c-accent-deep: var(--pal-grass-deep);
  --c-accent-soft: #DCF2E2;
  --c-pop: var(--pal-sun);
}
html[data-theme='beeri'] {
  --c-accent: var(--pal-blast);
  --c-accent-deep: var(--pal-blast-deep);
  --c-accent-soft: #FDE7D2;
  --c-pop: var(--pal-bolt);
}
html[data-theme='tom'] {
  --c-accent: var(--pal-cyan);
  --c-accent-deep: var(--pal-cyan-deep);
  --c-accent-soft: #D8EFF4;
  --c-pop: var(--pal-blast);
}
html[data-theme='boss'] {
  --c-accent: var(--pal-graphite);
  --c-accent-deep: var(--pal-graphite-deep);
  --c-accent-soft: #E2E8EF;
  --c-pop: var(--pal-bolt);
}