/* Hallmark · macrostructure: app-spa (playful journal) · tone: soft, cute, intimate
   Theme: custom "Sea & Sunset" (vibe: biển dịu + cam ấm, pastel, dễ thương)
   paper: light (#F0FAFC) · display: rounded-sans (Baloo 2) · accent: warm (orange)
   brand yêu cầu: xanh lớp biển (bạn gái) + cam (bạn trai) */

:root {
  /* ----- màu: biển ----- */
  --sea-050: #F0FAFC;
  --sea-100: #DCF3F8;
  --sea-200: #B7E5EF;
  --sea-300: #83CFE2;
  --sea-400: #45B4CF;
  --sea-500: #1795B4;
  --sea-600: #0E7F9B;   /* nút secondary, AA với trắng 4.64 */
  --sea-700: #0B6178;
  --sea-800: #094B5E;
  --sea-900: #093845;

  /* ----- màu: cam ----- */
  --orange-050: #FFF4EC;
  --orange-100: #FFE6D5;
  --orange-200: #FFCBA8;
  --orange-300: #FFA971;
  --orange-400: #FF8A4D;
  --orange-500: #F9703E;  /* chỉ dùng trang trí / chữ lớn */
  --orange-600: #C24315;  /* nút primary, AA với trắng 5.11 */
  --orange-700: #A93A12;

  /* ----- màu: nền chữ ----- */
  --ink: #17323D;
  --ink-soft: #35586A;
  --muted: #4E6E79;
  --card: #FFFFFF;
  --line: #D8EAF0;
  --line-soft: #E7F3F7;
  --bg: #F0FAFC;
  --peach: #FFF9F4;

  --danger: #C0392B;
  --danger-soft: #FBEAE7;
  --ok: #1E7F5C;

  /* gradient chủ đạo: biển -> hoàng hôn */
  --grad-brand: linear-gradient(115deg, #1795B4 0%, #45B4CF 46%, #FF8A4D 100%);
  --grad-brand-soft: linear-gradient(115deg, #DCF3F8 0%, #FFE6D5 100%);
  --grad-sunset: linear-gradient(160deg, #45B4CF 0%, #FF8A4D 85%);

  /* ----- đổ bóng (tint biển, không đen) ----- */
  --shadow-sm: 0 2px 8px rgba(23, 120, 150, 0.10);
  --shadow-md: 0 10px 30px rgba(23, 120, 150, 0.14);
  --shadow-lg: 0 24px 60px rgba(23, 120, 150, 0.20);
  --shadow-pop: 0 6px 0 rgba(14, 127, 155, 0.16);

  /* ----- font ----- */
  --font-display: 'Baloo 2', 'Quicksand', system-ui, sans-serif;
  --font-body: 'Quicksand', system-ui, sans-serif;
  --font-hand: 'Caveat', 'Baloo 2', cursive;

  --t-xs: 0.8125rem;
  --t-sm: 0.875rem;
  --t-md: 1rem;
  --t-lg: 1.125rem;
  --t-xl: 1.375rem;
  --t-2xl: 1.75rem;
  --t-3xl: 2.25rem;
  --t-hero: clamp(2.35rem, 5.5vw, 3.4rem);

  /* ----- khoảng cách (thang 4pt) ----- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  /* ----- bo góc ----- */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ----- chuyển động ----- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 150ms;
  --dur-2: 250ms;
  --dur-3: 400ms;

  /* ----- lớp z ----- */
  --z-nav: 50;
  --z-fab: 45;
  --z-gate: 120;
  --z-sheet: 140;
  --z-modal: 150;
  --z-lightbox: 160;
  --z-confetti: 170;
  --z-toast: 180;

  --nav-h: 64px;
  --bottomnav-h: 62px;
  --content-max: 1080px;
}