/* ===== Nền Móng — website · token v2.1 "Nắng sớm trên bàn trưng bày" (31/10/2026) ===== */
:root {
  color-scheme: light;

  /* Nền ngà: sáng, ấm. Thẻ và ảnh là trắng ngọc nổi trên ngà. */
  --bg: #FAF8F4;
  --bg-alt: #F3EFE8;
  --bg-stone: #EAE4D9;
  --surface: #FFFFFF;
  --surface-2: #FFFFFF;

  --text: #152030;
  --text-2: #3E4857;
  --text-3: #5A6370;

  --brand: #1D3B5F;
  --brand-hover: #163150;
  --brand-tint: #E9EEF4;
  --brand-deep: #12253C;
  --accent: #D99A2B;        /* CHỈ cho hình (thanh móng, chấm). Chữ màu đồng dùng --accent-text */
  --accent-text: #82570E;

  --line: rgba(21, 32, 48, .08);
  --line-strong: #7A8290;
  --hl: rgba(255, 255, 255, .72);
  --glow-steel: rgba(29, 59, 95, .09);
  --glow-brass: rgba(217, 154, 43, .07);
  --lamp: rgba(255, 255, 255, .5);
  --glass: color-mix(in srgb, var(--bg) 84%, transparent);
  --stage-bg: radial-gradient(70% 60% at 50% 38%, rgba(255, 255, 255, .95), transparent 72%), linear-gradient(180deg, #FFFFFF 0%, #F4F0E9 100%);

  --cta-bg: var(--brand);
  --cta-bg-hover: var(--brand-hover);
  --cta-text: #FFFFFF;
  --link: var(--brand);
  --focus: #1D3B5F;

  --ok: #1E6B45; --warn: #8A5300; --danger: #A8261D; --warn-bg: #F7ECD6;

  --deep-text: #EEF1F4;
  --deep-text-2: #B4C1D1;
  --deep-text-3: #8E9DB0;
  --deep-line: rgba(238, 241, 244, .14);

  --shot-filter: none;
  --phone-bezel: #0D131B;

  /* Bóng 5 lớp mềm, ánh thép */
  --shadow-1: 0 1px 1px rgba(21,32,48,.04), 0 2px 6px -2px rgba(21,32,48,.07);
  --shadow-shot: 0 0 0 1px rgba(21,32,48,.06), 0 1px 2px rgba(21,32,48,.04), 0 6px 12px -4px rgba(21,32,48,.06), 0 24px 48px -16px rgba(21,32,48,.14), 0 56px 96px -40px rgba(21,32,48,.18);
  --shadow-lift: 0 2px 4px rgba(21,32,48,.05), 0 18px 36px -12px rgba(21,32,48,.16), 0 64px 120px -40px rgba(21,32,48,.22);
  --shadow-stage: 0 0 0 1px rgba(21,32,48,.05), inset 0 1px 0 var(--hl), 0 30px 80px -40px rgba(21,32,48,.20);
  --shadow-sheet: 0 1px 2px rgba(21,32,48,.06), 0 24px 56px -18px rgba(21,32,48,.30);
  --shadow-phone: 0 2px 4px rgba(21,32,48,.08), 0 24px 48px -16px rgba(21,32,48,.32);
  --shadow-cta: inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(21,32,48,.14), 0 10px 24px -10px rgba(29,59,95,.45);

  /* Chữ */
  --font-display: "Source Serif 4", "NM Serif Fallback", Georgia, serif;
  --font-head: "Archivo", "Be Vietnam Pro", "Segoe UI", system-ui, sans-serif;
  --font-body: "Be Vietnam Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
  --head-stretch: 98%;

  --fs-display: clamp(2.375rem, 1.5rem + 3.6vw, 3.875rem);
  --fs-h2:      clamp(1.875rem, 1.45rem + 1.75vw, 2.75rem);
  --fs-h3:      clamp(1.375rem, 1.27rem + .45vw, 1.625rem);
  --fs-lead:    clamp(1.125rem, 1.07rem + .25vw, 1.3125rem);
  --fs-body:    clamp(1.0625rem, 1.04rem + .1vw, 1.125rem);
  --fs-small:   .9375rem;
  --fs-caption: .875rem;

  --lh-display: 1.14;
  --lh-h2: 1.18;
  --lh-h3: 1.3;
  --lh-body: 1.65;
  --tracking-display: -.012em;
  --measure: 64ch;

  --container: 1200px;
  --gutter: 24px;
  --page-pad: clamp(16px, 4vw, 40px);
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section-y: clamp(64px, 3rem + 2vw, 100px);
  --stage-pad: clamp(16px, 3.2vw, 48px);

  /* Bo góc (v2.1) — vẫn CẤM nút viên thuốc */
  --r-sm: 12px; --r-md: 14px; --r-lg: 24px; --r-xl: 32px; --r-phone: 48px; --r-paper: 3px;

  /* Chuyển động: 3 đường cong, KHÔNG overshoot */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-inout: cubic-bezier(.65, .05, .36, 1);
  --ease-soft: cubic-bezier(.33, 1, .68, 1);
  --ease: var(--ease-out);
  --t-1: 160ms; --t-2: 280ms; --t-3: 560ms; --t-4: 880ms; --t-5: 1200ms;
  --dur-1: var(--t-1); --dur-2: var(--t-2); --dur-3: var(--t-3);
  --stagger: 70ms; --rise: 16px; --blur-in: 6px;
}
@media (max-width: 767px) { :root { --rise: 10px; --blur-in: 0px; } }

/* Tối: "phòng trưng bày buổi tối". Khối dưới được chép y nguyên vào :root[data-theme="dark"]. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #070B11; --bg-alt: #0A1018; --bg-stone: #05080D; --surface: #0E1620; --surface-2: #121C28;
    --text: #EEF0F3; --text-2: #BEC6D0; --text-3: #949EAB;
    --brand: #A9C3E3; --brand-hover: #C0D3EB; --brand-tint: #1A2B40; --brand-deep: #08111C;
    --accent-text: #E3AE4E;
    --line: rgba(238, 240, 243, .08); --line-strong: #687588;
    --hl: rgba(255, 255, 255, .06);
    --glow-steel: rgba(120, 160, 210, .14); --glow-brass: rgba(217, 154, 43, .10);
    --lamp: rgba(160, 190, 230, .18);
    --cta-bg: #D99A2B; --cta-bg-hover: #E6B158; --cta-text: #10161F;
    --link: #A9C3E3; --focus: #A9C3E3;
    --ok: #5CC08B; --warn: #E5AE45; --danger: #F0776C; --warn-bg: #2A2110;
    --shot-filter: brightness(.86) contrast(1.04);
    --stage-bg: radial-gradient(70% 60% at 50% 40%, rgba(120, 160, 210, .10), transparent 72%), linear-gradient(180deg, #111A26 0%, #0B121B 100%);
    --shadow-1: 0 0 0 1px rgba(255,255,255,.05), 0 2px 6px -2px rgba(0,0,0,.5);
    --shadow-shot: 0 0 0 1px rgba(255,255,255,.07), 0 24px 48px -16px rgba(0,0,0,.6), 0 56px 96px -40px rgba(0,0,0,.7);
    --shadow-lift: 0 0 0 1px rgba(255,255,255,.09), 0 28px 56px -16px rgba(0,0,0,.7);
    --shadow-stage: 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 var(--hl), 0 30px 80px -40px rgba(0,0,0,.8);
    --shadow-sheet: 0 0 0 1px rgba(255,255,255,.06), 0 24px 56px -18px rgba(0,0,0,.7);
    --shadow-phone: 0 0 0 1px rgba(255,255,255,.14), 0 24px 48px -16px rgba(0,0,0,.7);
    --shadow-cta: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 24px -10px rgba(217,154,43,.30);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070B11; --bg-alt: #0A1018; --bg-stone: #05080D; --surface: #0E1620; --surface-2: #121C28;
  --text: #EEF0F3; --text-2: #BEC6D0; --text-3: #949EAB;
  --brand: #A9C3E3; --brand-hover: #C0D3EB; --brand-tint: #1A2B40; --brand-deep: #08111C;
  --accent-text: #E3AE4E;
  --line: rgba(238, 240, 243, .08); --line-strong: #687588;
  --hl: rgba(255, 255, 255, .06);
  --glow-steel: rgba(120, 160, 210, .14); --glow-brass: rgba(217, 154, 43, .10);
  --lamp: rgba(160, 190, 230, .18);
  --cta-bg: #D99A2B; --cta-bg-hover: #E6B158; --cta-text: #10161F;
  --link: #A9C3E3; --focus: #A9C3E3;
  --ok: #5CC08B; --warn: #E5AE45; --danger: #F0776C; --warn-bg: #2A2110;
  --shot-filter: brightness(.86) contrast(1.04);
  --stage-bg: radial-gradient(70% 60% at 50% 40%, rgba(120, 160, 210, .10), transparent 72%), linear-gradient(180deg, #111A26 0%, #0B121B 100%);
  --shadow-1: 0 0 0 1px rgba(255,255,255,.05), 0 2px 6px -2px rgba(0,0,0,.5);
  --shadow-shot: 0 0 0 1px rgba(255,255,255,.07), 0 24px 48px -16px rgba(0,0,0,.6), 0 56px 96px -40px rgba(0,0,0,.7);
  --shadow-lift: 0 0 0 1px rgba(255,255,255,.09), 0 28px 56px -16px rgba(0,0,0,.7);
  --shadow-stage: 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 var(--hl), 0 30px 80px -40px rgba(0,0,0,.8);
  --shadow-sheet: 0 0 0 1px rgba(255,255,255,.06), 0 24px 56px -18px rgba(0,0,0,.7);
  --shadow-phone: 0 0 0 1px rgba(255,255,255,.14), 0 24px 48px -16px rgba(0,0,0,.7);
  --shadow-cta: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 24px -10px rgba(217,154,43,.30);
}

body { background: var(--bg); color: var(--text); font: 400 var(--fs-body)/var(--lh-body) var(--font-body); }