/* ==========================================================================
   Design tokens – Cơm Nhà Ruby Ken
   Màu lấy từ logo.jpg (nền #1E1818, ruy băng nâu #A0592A, dao nĩa #EEC78C),
   biển hiệu cua-hang.jpg (chữ vàng) và mockup home.png.
   Reference CSS viewport: 1280px – Global container: 1200px.
   ========================================================================== */
:root {
  /* Màu */
  --color-primary: #f2b12e;          /* vàng CTA */
  --color-primary-dark: #d9970f;
  --color-secondary: #6b3416;        /* nâu đỏ */
  --color-accent: #a0592a;           /* nâu ruy băng logo */
  --color-accent-light: #eec78c;     /* màu dao nĩa logo */
  --color-gold: #a06a05;             /* chữ RUBY KEN trên nền sáng – đạt tương phản ≥ 3:1 (chữ lớn) kể cả khi lớp kem hơi lẫn ảnh */
  --color-text: #3d2b20;
  --color-muted: #75604f;
  --color-heading: #4a2310;
  --color-background: #fbf6ee;       /* kem */
  --color-surface: #ffffff;
  --color-surface-alt: #f5ecdd;
  --color-sand: #f3e7d4;             /* nền be ấm cho khối Hình ảnh – tạo nhịp với nền kem */
  --color-border: #eadcc6;
  --color-dark: #1e1818;             /* nền logo */
  --color-dark-2: #2c1f18;
  --color-on-dark: #f3e6d3;
  --color-on-dark-muted: #c9b7a2;

  /* Layout */
  --container-max: 1200px;
  --container-gutter: clamp(16px, 4vw, 40px);
  --section-space: clamp(48px, 6vw, 80px);
  --header-h: 88px;

  /* Font */
  --font-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: "Lora", Georgia, "Times New Roman", serif;
  --font-script: "Dancing Script", "Segoe Script", cursive;
  --font-display: "Oswald", "Arial Narrow", sans-serif; /* tiêu đề hiển thị kiểu condensed như mockup */

  /* Cỡ chữ */
  --text-small: 0.875rem;
  --text-body: 1rem;
  --text-lead: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-nav: 0.9375rem;
  --text-card: 1.125rem;
  --text-section-title: clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem);
  --text-section-script: clamp(1.5rem, 1.25rem + 0.8vw, 2rem);
  --text-hero-title: clamp(3.5rem, 2rem + 6.6vw, 7.5rem);
  --text-hero-script: clamp(2.75rem, 1.6rem + 5.2vw, 6.25rem);
  --text-hero-sub: clamp(1.375rem, 1.05rem + 1.3vw, 2.25rem);

  /* Bo góc / bóng */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(62, 34, 15, 0.08);
  --shadow-md: 0 12px 32px rgba(62, 34, 15, 0.14);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Vân giấy rất nhẹ cho nền kem/be (bớt cảm giác phẳng, đơn điệu) */
  --paper-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .27 0 0 0 0 .12 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* Đường cong chuyển khối – cùng motif với đường cong dưới header */
  --curve-h: 34px;
  --focus-ring: 0 0 0 3px var(--color-surface), 0 0 0 6px var(--color-accent);
}