/* ==========================================================================
   Design tokens — the single source of truth for colour, type, space, motion.
   Nothing else in the codebase should hard-code a raw colour or pixel scale.
   ========================================================================== */

:root {
  /* --- Brand palette ---------------------------------------------------- */
  --brand-50:  #F1EEFF;
  --brand-100: #DFD9FF;
  --brand-300: #A99CFF;
  --brand-500: #6C5CE7;
  --brand-600: #5B4BD6;
  --brand-700: #4335AD;

  --mango-400: #FFC93C;
  --mango-500: #F5B301;
  --mint-400:  #2FD3A5;
  --mint-500:  #16B98A;
  --coral-400: #FF7A6B;
  --coral-500: #F0574A;
  --sky-400:   #4FB8F5;
  --grape-400: #C77DFF;

  /* Playful accents used for member avatars and chore rooms */
  --fun-1: #FF8FA3;
  --fun-2: #FFB86B;
  --fun-3: #FFD93D;
  --fun-4: #6BCB77;
  --fun-5: #4D96FF;
  --fun-6: #B983FF;
  --fun-7: #37D6C4;
  --fun-8: #FF6B6B;

  /* --- Semantic surfaces (light) ---------------------------------------- */
  --bg:            #FDF7F2;
  --bg-tint:       radial-gradient(120% 90% at 50% 0%, #FFEFE3 0%, #FDF7F2 55%, #F6F1FF 100%);
  --surface:       #FFFFFF;
  --surface-muted: #F5F1FA;
  --surface-sunk:  #EFEAF6;
  --border:        #E7E0F0;
  --border-strong: #D6CCE8;

  --text:        #241F33;
  --text-muted:  #6C6480;
  --text-faint:  #9890AC;
  --text-invert: #FFFFFF;

  --success:      var(--mint-500);
  --success-soft: #DEF7EE;
  --warning:      var(--mango-500);
  --warning-soft: #FFF3D4;
  --danger:       var(--coral-500);
  --danger-soft:  #FFE6E2;
  --info-soft:    #E3F1FF;

  /* --- Type ------------------------------------------------------------- */
  --font-sans: 'Nunito', 'Baloo 2', ui-rounded, 'SF Pro Rounded', 'Segoe UI Variable',
               system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-sans);

  --fs-xs:   0.75rem;   /* 12 */
  --fs-sm:   0.8125rem; /* 13 */
  --fs-base: 0.9375rem; /* 15 */
  --fs-md:   1.0625rem; /* 17 */
  --fs-lg:   1.25rem;   /* 20 */
  --fs-xl:   1.5rem;    /* 24 */
  --fs-2xl:  1.875rem;  /* 30 */
  --fs-3xl:  2.375rem;  /* 38 */

  --fw-normal: 500;
  --fw-medium: 600;
  --fw-bold:   700;
  --fw-black:  800;

  --lh-tight: 1.2;
  --lh-body:  1.5;

  /* --- Space (4pt grid) -------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;

  /* --- Radius, shadow, motion -------------------------------------------- */
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(36, 31, 51, .06), 0 2px 6px rgba(36, 31, 51, .05);
  --shadow-md: 0 4px 14px rgba(36, 31, 51, .08), 0 1px 3px rgba(36, 31, 51, .05);
  --shadow-lg: 0 18px 40px rgba(36, 31, 51, .14);
  --shadow-brand: 0 8px 20px rgba(108, 92, 231, .32);

  /* Theme gradient stops — regenerated from the household colour by theme.js */
  --hero-from: var(--brand-500);
  --hero-via: var(--grape-400);
  --hero-to: var(--sky-400);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur-fast: 130ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  /* --- Layout ------------------------------------------------------------ */
  --app-max: 480px;
  --tabbar-h: 64px;
  --header-h: 60px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --z-header: 20;
  --z-tabbar: 30;
  --z-modal: 60;
  --z-toast: 80;
}

/* --- Dark theme ---------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:            #131024;
    --bg-tint:       radial-gradient(120% 90% at 50% 0%, #241C40 0%, #171329 55%, #12101F 100%);
    --surface:       #1E1936;
    --surface-muted: #262042;
    --surface-sunk:  #171331;
    --border:        #302A4E;
    --border-strong: #423A66;

    --text:       #F3F0FB;
    --text-muted: #ABA3C6;
    --text-faint: #7C7499;

    --success-soft: #123B31;
    --warning-soft: #3D3213;
    --danger-soft:  #3E1F1F;
    --info-soft:    #16304A;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, .45);
    --shadow-lg: 0 18px 40px rgba(0, 0, 0, .55);
    --shadow-brand: 0 8px 20px rgba(108, 92, 231, .4);
  }
}