/* =========================================================
   RED DZAO — CSS VARIABLES
   Design tokens: màu sắc, typography, spacing, motion, layout
   ========================================================= */

:root {
  /* ---- Màu sắc thương hiệu (Brand colors) ---- */
  --color-red: #B5261E;
  --color-red-dark: #8C1D17;
  --color-red-soft: #C94B3F;
  --color-charcoal: #202326;
  --color-ivory: #F5EBDD;
  --color-ivory-soft: #FBF6EE;
  --color-gold: #D99A3D;
  --color-gold-soft: #E8C07E;
  --color-wood: #6B4632;
  --color-wood-dark: #4A2F22;
  --color-green: #4C6B4F;

  /* ---- Vai trò màu (Semantic roles) ---- */
  --bg-primary: var(--color-ivory);
  --bg-elevated: var(--color-ivory-soft);
  --bg-dark: var(--color-charcoal);
  --text-primary: var(--color-charcoal);
  --text-on-dark: var(--color-ivory-soft);
  --text-muted: #5B5148;
  --accent-primary: var(--color-red);
  --accent-secondary: var(--color-gold);
  --border-soft: rgba(32, 35, 38, 0.12);
  --border-on-dark: rgba(245, 235, 221, 0.18);

  /* ---- Typography ---- */
  --font-heading: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Be Vietnam Pro', 'Segoe UI', sans-serif;

  --fs-display: clamp(2.6rem, 8vw, 5.6rem);
  --fs-h1: clamp(2.1rem, 6vw, 3.6rem);
  --fs-h2: clamp(1.7rem, 4.5vw, 2.6rem);
  --fs-h3: clamp(1.25rem, 3vw, 1.6rem);
  --fs-lead: clamp(1.05rem, 2.4vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.8rem;

  --lh-heading: 1.15;
  --lh-body: 1.7;

  /* ---- Spacing (mobile-first scale) ---- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.75rem;
  --space-lg: 3rem;
  --space-xl: 5rem;
  --space-2xl: 7.5rem;

  --section-padding-y: clamp(4rem, 10vw, 8rem);
  --container-padding-x: clamp(1.25rem, 5vw, 3rem);
  --container-max: 1180px;

  /* ---- Bo góc & viền ---- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 24px;

  /* ---- Bóng đổ ---- */
  --shadow-soft: 0 8px 30px rgba(32, 22, 14, 0.12);
  --shadow-deep: 0 20px 60px rgba(20, 14, 10, 0.28);

  /* ---- Chuyển động (Motion) ---- */
  --ease-story: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 220ms;
  --dur-normal: 480ms;
  --dur-slow: 900ms;

  /* ---- Layer/Z-index ---- */
  --z-thread: 2;
  --z-nav: 50;
  --z-sticky-cta: 60;
  --z-overlay: 100;

  /* ---- An toàn cho thiết bị có tai thỏ / home indicator ---- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---- Chiều rộng sidebar desktop ---- */
  --sidebar-width: 96px;
}

/* Chỉnh biến theo breakpoint lớn hơn nếu cần trong tương lai */
@media (min-width: 1024px) {
  :root {
    --container-padding-x: clamp(2rem, 4vw, 4rem);
  }
}