/* ============================================================
   YOIN — Design tokens v1.0
   Nguồn: yoinkit.vn / design-system.md + setup-guide.md
   Không sửa giá trị hex ở đây mà không cập nhật lại file hướng dẫn.
   ============================================================ */
:root {
  /* --- Nền & giấy --- */
  --ivory:      #FBF5EC;
  --cream:      #F6EEE1;
  --paper:      #F1E6D5;
  --sage-band:  #E7E7DA;

  /* --- Primary --- */
  --terra:      #BE6A4C;
  --terra-dark: #A5563B;
  --terra-soft: #E7C9B8;

  /* --- Accent phụ --- */
  --sage:       #8B9A7A;
  --sage-dark:  #6E7E5F;

  /* --- Chữ --- */
  --ink:        #3B302A;
  --ink-soft:   #6E6157;
  --muted:      #9A8C7C;

  /* --- Đường kẻ --- */
  --line:       #E6D8C5;
  --line-soft:  #EEE3D2;

  /* --- Evening Blue --- */
  --blue:       #4A4E7C;
  --blue-soft:  #C9C8DE;
  --violet:     #7C4A6B;

  /* --- Trạng thái hệ thống --- */
  --success:    #6E7E5F;
  --danger:     #A5563B;

  /* --- Font --- */
  --serif: "Fraunces", Georgia, serif;
  --sans:  "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, sans-serif;
  --jp:    "Noto Serif JP", "Fraunces", serif;

  /* --- Chuyển động & bóng --- */
  --ease:      cubic-bezier(.22,.61,.36,1);
  --shadow:    0 30px 60px -34px rgba(120,80,55,.5);
  --shadow-sm: 0 16px 34px -22px rgba(120,80,55,.45);

  /* --- Hình khối --- */
  --r-pill: 999px;
  --r-lg:   24px;
  --r-md:   16px;
  --r-sm:   14px;

  /* --- Nhịp --- */
  --wrap:    1180px;
  --gutter:  40px;
  --sec-pad: 100px;

  /* --- Ghi đè biến Bootstrap của theme Iori --- */
  --bs-primary:        #BE6A4C;
  --bs-primary-rgb:    190, 106, 76;
  --bs-secondary:      #8B9A7A;
  --bs-secondary-rgb:  139, 154, 122;
  --bs-success:        #6E7E5F;
  --bs-danger:         #A5563B;
  --bs-body-bg:        #FBF5EC;
  --bs-body-color:     #3B302A;
  --bs-body-font-family: "Be Vietnam Pro", -apple-system, sans-serif;
  --bs-body-font-size:   16px;
  --bs-border-color:   #E6D8C5;
  --bs-link-color:     #BE6A4C;
  --bs-link-hover-color: #A5563B;
  --bs-border-radius:    16px;
  --bs-border-radius-lg: 24px;
  --bs-border-radius-pill: 999px;
}

/* Bootstrap còn hardcode một số chỗ không qua biến */
.btn-primary   { --bs-btn-bg: #BE6A4C; --bs-btn-border-color: #BE6A4C;
                 --bs-btn-hover-bg: #A5563B; --bs-btn-hover-border-color: #A5563B;
                 --bs-btn-active-bg: #A5563B; --bs-btn-color: #FFF7EF; }
.btn-outline-primary { --bs-btn-color: #BE6A4C; --bs-btn-border-color: #BE6A4C;
                 --bs-btn-hover-bg: #BE6A4C; --bs-btn-hover-color: #FFF7EF; }
.form-control:focus, .form-select:focus {
  border-color: var(--terra);
  box-shadow: 0 0 0 3px rgba(190,106,76,.15);
}
::selection { background: var(--terra-soft); color: var(--ink); }

/* --- Chữ --- */
body { font-family: var(--sans); color: var(--ink); background: var(--ivory);
       font-size: 16px; line-height: 1.7; font-weight: 400;
       -webkit-font-smoothing: antialiased; }

h1, h2, h3, .serif {
  font-family: var(--serif); font-weight: 500;
  line-height: 1.08; letter-spacing: -.3px; color: var(--ink);
}

h1 { font-size: clamp(44px, 5.4vw, 84px); line-height: .98; }
h2 { font-size: clamp(32px, 3.8vw, 52px); }
h3 { font-size: clamp(22px, 2.2vw, 30px); }

.eyebrow { font-family: var(--sans); font-size: 12px; letter-spacing: 3px;
           text-transform: uppercase; color: var(--terra); font-weight: 600; }
.eyebrow.sage { color: var(--sage-dark); }

.kanji { font-family: var(--jp); font-weight: 300; }

p { color: var(--ink-soft); }
small, .meta, .caption { color: var(--muted); font-size: 13px; }

/* --- NÚT --- */
.btn, .button, .btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--terra); color: #FFF7EF;
  font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: .3px;
  padding: 16px 34px; border: none; border-radius: var(--r-pill); cursor: pointer;
  box-shadow: 0 16px 30px -14px rgba(190,106,76,.7);
  transition: background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover { background: var(--terra-dark); transform: translateY(-2px);
             box-shadow: 0 22px 38px -14px rgba(190,106,76,.75); }

.btn-ghost { background: transparent; color: var(--terra);
             border: 1px solid var(--line); box-shadow: none; }
.btn-ghost:hover { background: var(--terra-soft); color: var(--terra-dark); transform: none; }

/* --- CARD --- */
.card, .product-card, .post-card {
  background: var(--paper); border: 1px solid var(--line-soft);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

/* --- ẢNH --- */
img { display: block; max-width: 100%; }
.rounded-img { border-radius: var(--r-lg); overflow: hidden; }

/* --- FORM --- */
.form-control, .form-select, input[type=text], input[type=tel], input[type=email], textarea {
  background: #FFFCF7; border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 14px 16px;
  font-family: var(--sans); font-size: 15px; color: var(--ink);
}
::placeholder { color: var(--muted); }

/* --- CONTAINER & NHỊP --- */
.container, .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: var(--sec-pad) 0; }
section.alt { background: var(--cream); }

/* --- ĐƯỜNG KẺ --- */
hr, .divider { border: none; border-top: 1px solid var(--line); }

/* --- HEADER --- */
.header, header { background: rgba(251,245,236,.86); backdrop-filter: blur(12px);
                  border-bottom: 1px solid var(--line-soft); }

/* --- FOOTER --- */
.footer, footer { background: var(--ink); color: var(--paper); }
.footer a { color: var(--terra-soft); }

/* --- BADGE / GIÁ --- */
.price { font-family: var(--serif); color: var(--terra); font-weight: 600; }
.badge-blue { background: var(--blue-soft); color: var(--blue); border-radius: var(--r-pill);
              padding: 4px 12px; font-size: 12px; font-weight: 600; }

/* --- MOBILE --- */
@media (max-width: 860px) {
  :root { --gutter: 22px; --sec-pad: 64px; }
  h1 { font-size: 42px; }
}

/* --- CHUYỂN ĐỘNG (reveal on scroll) --- */
.reveal { opacity: 0; transform: translateY(26px);
          transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .1s; }
.reveal.d2 { transition-delay: .2s; }
.reveal.d3 { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

html { scroll-behavior: smooth; }