/* Phong Thủy Đất Việt · design tokens
 * Màu lấy từ mockup, quy về OKLCH. Mọi màu/font/khoảng cách trong style.css đều tham chiếu tới đây.
 */
:root {
  /* Nền tối của cửa hàng */
  --color-ink: oklch(16% 0.019 52.8);
  --color-ink-a20: oklch(16% 0.019 52.8 / 0.2);
  --color-ink-a55: oklch(16% 0.019 52.8 / 0.55);
  --color-ink-a80: oklch(16% 0.019 52.8 / 0.8);
  --color-shadow: oklch(12% 0.02 50 / 0.55);

  /* Vàng ánh kim */
  --color-gold-100: oklch(92.9% 0.085 93);
  --color-gold-300: oklch(84% 0.117 87.5);
  --color-gold-300-a50: oklch(84% 0.117 87.5 / 0.5);
  --color-gold-500: oklch(71.4% 0.118 80.2);
  --color-gold-700: oklch(51.3% 0.097 70.3);
  --color-gold-900: oklch(34.1% 0.063 66.1);
  --color-gold-900-a12: oklch(34.1% 0.063 66.1 / 0.12);

  /* Giấy dó của form */
  --color-paper-50: oklch(98.6% 0.014 84.6);
  --color-paper-50-a85: oklch(98.6% 0.014 84.6 / 0.85);
  --color-paper-100: oklch(95.4% 0.027 85.7);
  --color-paper-200: oklch(89.8% 0.051 86.9);
  --color-paper-line: oklch(82.8% 0.059 83.9);

  /* Chữ trên nền giấy */
  --color-text: oklch(28.4% 0.044 57.5);
  --color-text-muted: oklch(48.2% 0.041 68);
  --color-icon: oklch(33% 0.054 58.7);

  /* Đỏ son của nút gửi */
  --color-red-500: oklch(50.8% 0.185 28.9);
  --color-red-700: oklch(37.7% 0.143 28.7);
  --color-red-shadow: oklch(30% 0.12 28.7 / 0.45);
  --color-on-red: oklch(98.1% 0.02 84.6);
  --color-sheen: oklch(98.1% 0.02 84.6 / 0.28);

  /* Trạng thái */
  --color-danger: oklch(47.6% 0.172 28.5);
  --color-danger-a12: oklch(47.6% 0.172 28.5 / 0.12);
  --color-success: oklch(47.1% 0.099 148.4);
  --color-focus: oklch(51.3% 0.097 70.3);

  /* Ngọc bích của dải cam kết */
  --color-jade-600: oklch(38% 0.058 166);
  --color-jade-700: oklch(32.3% 0.052 167.4);
  --color-jade-900: oklch(24.4% 0.037 168.5);
  --color-cream: oklch(92.4% 0.04 88.2);
  --color-cream-muted: oklch(80% 0.035 88);
  /* Font */
  --font-display: "Cormorant SC", "Times New Roman", serif;
  --font-script: "Dancing Script", cursive;
  --font-body: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Cỡ chữ */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-cta: clamp(0.875rem, 0.8rem + 0.3vw, 1.0625rem);

  /* Nhịp dọc co giãn theo chiều cao màn hình: nhỏ nhất ở 600px, lớn nhất từ 920px.
   * Công thức a·vh + b nội suy tuyến tính giữa hai mốc đó, để cả trang vừa một màn hình không phải cuộn. */
  --text-title: min(8vw + 1rem, clamp(2.25rem, 15vh - 3.375rem, 5.25rem));
  --text-title-2: min(4.8vw + 0.9rem, clamp(1.5rem, 8.75vh - 1.781rem, 3.25rem));
  --text-tagline: clamp(1rem, min(4.8vw, 3.75vh - 0.406rem), 1.75rem);
  --emblem-w: clamp(5.5rem, 47.5vh - 12.313rem, 15rem);
  --v-pad: clamp(0.5rem, 5vh - 1.375rem, 1.5rem);
  --v-form-top: clamp(0.5rem, 6.25vh - 1.844rem, 1.75rem);
  --v-field-gap: clamp(0.375rem, 1.25vh - 0.094rem, 0.625rem);
  --v-field-pad: clamp(0.25rem, 1.25vh - 0.219rem, 0.5rem);
  --v-area-h: clamp(1.4em, 7.375vh - 1.366rem, 2.9em);
  --v-foot-pad: clamp(0.5rem, 2.5vh - 0.438rem, 1rem);
  --cta-h: clamp(2.875rem, 3.125vh + 1.703rem, 3.5rem);

  /* Khoảng cách (thang 4pt) */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;

  /* Hình khối: ô nhập 12px, nút bo tròn hết, khung góc lõm */
  --radius-field: 0.75rem;
  --radius-pill: 999px;
  --radius-notch: 8px;
  --frame-width: 16px;

  /* Chuyển động */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
  --dur-reveal: 700ms;
  --dur-sheen: 900ms;
}