/* ============================================================
   MD-VARIABLES.CSS — MyDream Design Tokens v1.1
   Kế thừa prototype v4 design system
   ============================================================ */

:root {
  /* ---- Brand ---- */
  --md-primary: #2B9A70;
  --md-primary-light: #45B88E;
  --md-primary-pale: #EEFBF4;
  --md-primary-border: #A8E6CD;
  --md-secondary: #F5A623;
  --md-secondary-light: #F7B84D;
  --md-secondary-pale: #FEF3D6;
  --md-secondary-border: #FAD07A;

  /* ---- Accent ---- */
  --md-coral: #FF6B6B;
  --md-sky: #4ECDC4;
  --md-purple: #A78BFA;
  --md-pink: #FF8FAB;
  --md-orange: #FF9F43;
  --md-blue: #60A5FA;

  /* ---- Child Fun ---- */
  --md-fun-yellow: #FFD93D;
  --md-fun-green: #6BCB77;
  --md-fun-blue: #4D96FF;
  --md-fun-red: #FF6B6B;
  --md-child-bg: #FFF8F0;
  --md-child-warm: #FFF0E0;

  /* ---- Grays ---- */
  --md-g9: #1C1F26;
  --md-g8: #2E323A;
  --md-g7: #4A4F5C;
  --md-g6: #636978;
  --md-g5: #7E8594;
  --md-g4: #A0A7B4;
  --md-g3: #C2C8D2;
  --md-g2: #E0E4EA;
  --md-g1: #F0F2F5;
  --md-g0: #F8F9FB;
  --md-w: #FFFFFF;

  /* ---- Status ---- */
  --md-ok: #22C55E;
  --md-warn: #F59E0B;
  --md-err: #EF4444;

  /* ---- Fonts (Google Fonts) ---- */
  --md-font-h: 'Quicksand', sans-serif;     /* Headings */
  --md-font-b: 'Be Vietnam Pro', sans-serif; /* Body */
  --md-font-c: 'Nunito', sans-serif;         /* Child UI */

  /* ---- Font sizes (tối ưu cho trẻ em + người già: tăng toàn bộ 1 bậc) ---- */
  --md-fs-xs: 0.82rem;
  --md-fs-sm: 0.94rem;
  --md-fs-base: 1.0rem;
  --md-fs-md: 1.1rem;
  --md-fs-lg: 1.25rem;
  --md-fs-xl: 1.55rem;
  --md-fs-2xl: 2.0rem;
  --md-fs-3xl: 2.6rem;

  /* ---- Radius ---- */
  --md-r-sm: 8px;
  --md-r-md: 12px;
  --md-r-lg: 16px;
  --md-r-xl: 24px;
  --md-r-full: 9999px;

  /* ---- Shadows ---- */
  --md-sh-sm: 0 2px 8px rgba(0,0,0,.05);
  --md-sh-md: 0 4px 16px rgba(0,0,0,.08);
  --md-sh-lg: 0 8px 32px rgba(0,0,0,.1);
  --md-sh-glow: 0 0 20px rgba(43,154,112,.2);
  --md-sh-fun: 0 4px 16px rgba(255,159,67,.2);

  /* ---- Transitions ---- */
  --md-ease: cubic-bezier(.4, 0, .2, 1);
  --md-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --md-dur-fast: 150ms;
  --md-dur: 250ms;
  --md-dur-slow: 400ms;

  /* ---- Z-index layers ---- */
  --md-z-base: 1;
  --md-z-nav: 100;
  --md-z-sidebar: 200;
  --md-z-modal: 500;
  --md-z-toast: 800;
  --md-z-chat: 900;

  /* ---- Spacing scale ---- */
  --md-sp-1: 4px;
  --md-sp-2: 8px;
  --md-sp-3: 12px;
  --md-sp-4: 16px;
  --md-sp-5: 20px;
  --md-sp-6: 24px;
  --md-sp-8: 32px;
  --md-sp-10: 40px;
  --md-sp-12: 48px;

  /* ---- Layout ---- */
  --md-sidebar-w: 220px;
  --md-bnav-h: 72px;
  --md-bnav-c-h: 64px;
  --md-header-h: 60px;
  --md-max-w: 480px;
}