/* ═══════════════════════════════════════════════════════════════════════
   DAIKI — HỆ THỊ GIÁC
   Mệnh Kim: trắng, bạc, than chì làm nền · đồng/champagne làm nhấn (Thổ sinh Kim)
   Không đỏ (Hỏa khắc Kim) · Không navy (Kim sinh Thủy, bị rút)

   Nguyên tắc sang: BỚT ĐI, không thêm vào.
   — Một màu nhấn duy nhất, dùng dè
   — Đường kẻ tóc 1px, không viền dày, không bóng đổ nặng
   — Chữ tiêu đề mảnh và to, giãn chữ rộng
   — Khoảng trắng nhiều gấp đôi mức "đủ"
   ═══════════════════════════════════════════════════════════════════════ */

[data-theme="light"]{
  /* ── SÁNG: trắng hồng hoa anh đào ── */
  --bg:#FDFAFB;            /* trắng phớt hồng */
  --bg-2:#F9F0F4;
  --surface:#FFFFFF;
  --surface-2:#FBF3F6;
  --ink:#2A2027;           /* mực — ấm ngả mận, không phải đen tuyền */
  --ink-2:#584750;
  --muted:#8E7A83;
  --faint:#BCA9B2;
  --gold:#A85572;          /* hồng sakura đậm — điểm nhấn chính */
  --gold-2:#D68CA6;
  --gold-soft:#FBEFF3;
  --hair:rgba(90,45,64,.13);
  --hair-2:rgba(90,45,64,.07);
  --copper:#A8544A;        /* cay / cảnh báo */
  --sage:#7E8B72;          /* chay */
  --glass:rgba(253,250,251,.84);
  --lift:0 1px 2px rgba(90,45,64,.04), 0 8px 28px rgba(90,45,64,.07);
  --on-gold:#FFFFFF;
  --sheen-1:rgba(255,255,255,.88);   /* ánh gương — nền sáng */
  --sheen-2:rgba(253,244,248,.60);
  --gloss:linear-gradient(158deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 34%);
}
[data-theme="dark"]{
  --bg:#171815;            /* than chì ấm */
  --bg-2:#101110;
  --surface:#1F211D;
  --surface-2:#292B26;
  --ink:#F2EFE7;
  --ink-2:#CFCBC0;
  --muted:#8F8C83;
  --faint:#5E5C55;
  --gold:#C9A96A;
  --gold-2:#E2CB9A;
  --gold-soft:rgba(201,169,106,.10);
  --hair:rgba(242,239,231,.11);
  --hair-2:rgba(242,239,231,.06);
  --copper:#B87A54;
  --sage:#96A489;
  --glass:rgba(23,24,21,.82);
  --lift:0 1px 2px rgba(0,0,0,.2), 0 12px 40px rgba(0,0,0,.35);
  --on-gold:#171815;
  --sheen-1:rgba(255,255,255,.055);  /* ánh gương — nền tối, đá mài dưới đèn */
  --sheen-2:rgba(255,255,255,.028);
  --gloss:linear-gradient(158deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 36%);
}
:root{
  --safe:env(safe-area-inset-bottom,0px);

  /* THANG CHỮ — mọi cỡ chữ trong hệ thống phải rơi vào đây, không có ngoại lệ.
     Trước đó có 9 / 9.6 / 10.5 / 12.5 / 13.5 lộn xộn — mắt đọc thấy "lệch"
     mà không chỉ ra được vì sao. */
  --t-xs:12px;    /* nhãn nhỏ, chữ hoa giãn */
  --t-sm:14px;    /* phụ chú, meta */
  --t-md:16px;    /* thân bài */
  --t-lg:18px;    /* nhấn */
  --t-xl:24px;    /* tên món */
  --t-2xl:30px;   /* tiêu đề tấm trượt */
  --t-3xl:44px;   /* hero */
}

/* ─────────── ÁNH GƯƠNG ───────────
   Một lớp sáng duy nhất phủ toàn trang, đứng yên khi cuộn.
   Không phải bóng đổ, không phải viền nổi — chỉ là ánh sáng hắt từ trên xuống,
   như mặt đá mài dưới đèn. Nhẹ tới mức không nhìn thẳng vào thì không thấy.
   ───────────────────────────────── */
body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1400px 700px at 50% -18%, var(--sheen-1), transparent 62%),
    linear-gradient(168deg, var(--sheen-2) 0%, transparent 46%);
}
/* Nền tối: thêm ánh champagne dịu ở đỉnh + góc — gương mát mắt */
[data-theme="dark"] body::before{
  background:
    radial-gradient(1200px 640px at 50% -12%, rgba(201,169,106,.09), transparent 58%),
    radial-gradient(800px 500px at 100% 0%, rgba(226,203,154,.05), transparent 52%),
    linear-gradient(168deg, var(--sheen-2) 0%, transparent 44%);
}
body > *{position:relative; z-index:1}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Jost',system-ui,sans-serif;
  font-size:var(--t-md); line-height:1.68; font-weight:400;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
  transition:background .4s, color .4s;
}
h1,h2,h3{margin:0; font-weight:400}

/* ─────────── CHỮ ───────────
   Cormorant Garamond: serif tương phản cao, nét mảnh — chữ của bìa sách và menu
   khách sạn. Đặt ở weight 300–400, cỡ lớn, giãn rộng.
   Jost: sans hình học, hậu duệ Futura — sạch, không rườm rà.
   Con số dùng tabular-nums để cột giá thẳng hàng.
   ─────────────────────────── */
.display{font-family:'Cormorant Garamond',serif; font-weight:300; letter-spacing:.01em}
.num{font-variant-numeric:tabular-nums; letter-spacing:.02em; font-weight:500}

.brand{
  font-family:'Cormorant Garamond',serif;
  font-weight:400; font-size:24px; line-height:1;
  letter-spacing:.42em; text-indent:.42em;    /* bù khoảng thừa bên phải */
  color:var(--ink);
}
.brand-sub{
  font-size:var(--t-xs); letter-spacing:.34em; text-transform:uppercase;
  color:var(--faint); margin-top:7px; font-weight:500;
}

/* nhãn nhỏ — chữ hoa giãn rộng, dấu hiệu của ấn phẩm cao cấp */
.eyebrow{
  font-size:var(--t-xs); letter-spacing:.3em; text-transform:uppercase; font-weight:500;
  color:var(--gold); display:flex; align-items:center; gap:16px;
}
.eyebrow::after{content:""; flex:1; height:1px; background:var(--hair-2)}

/* ─────────── MẶT PHẲNG ───────────
   Không bóng nổi, không gradient. Chỉ nền và một đường kẻ tóc.
   ─────────────────────────────── */
.panel{
  position:relative; overflow:hidden;
  background:var(--surface);
  border:1px solid var(--hair-2);
  border-radius:4px;                 /* bo nhẹ — bo tròn nhiều trông như app đồ chơi */
}
.panel::before{                       /* ánh gương — chỉ ở mép trên, tắt dần trong 1/3 thẻ */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--gloss);
}
.panel > *{position:relative}
.glass{
  background:var(--glass);
  backdrop-filter:blur(20px) saturate(1.1);
  -webkit-backdrop-filter:blur(20px) saturate(1.1);
  border-bottom:1px solid var(--hair-2);
}
.hair{height:1px; background:var(--hair-2); border:0; margin:0}

/* ─────────── NÚT ───────────
   Nút chính: nền đồng đặc, không gradient. Nút phụ: chỉ đường viền.
   ─────────────────────────── */
.btn{
  background:var(--gold); color:var(--on-gold);
  border:1px solid var(--gold);
  border-radius:3px; padding:17px 24px;
  font-family:'Jost',sans-serif; font-size:var(--t-sm); font-weight:500;
  letter-spacing:.16em; text-transform:uppercase;
  cursor:pointer;
  transition:background .25s, border-color .25s, opacity .2s, transform .08s;
}
.btn:hover{background:var(--gold-2); border-color:var(--gold-2)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.35; cursor:not-allowed}
.btn-ghost{
  background:transparent; color:var(--muted);
  border:1px solid var(--hair);
}
.btn-ghost:hover{background:transparent; border-color:var(--gold); color:var(--gold)}
.btn-sm{padding:11px 17px; font-size:var(--t-xs)}

/* nút +/- : hình tròn, mảnh */
.stepper{display:flex; align-items:center; gap:2px; flex:0 0 auto}
.stepper button{
  width:34px; height:34px; padding:0; border-radius:50%;
  display:grid; place-items:center; cursor:pointer;
  font-family:'Jost',sans-serif; font-size:var(--t-lg); font-weight:300; line-height:1;
  border:1px solid var(--hair); background:transparent; color:var(--ink-2);
  transition:border-color .2s, background .2s, color .2s, transform .08s;
}
.stepper button:hover{border-color:var(--gold); color:var(--gold)}
.stepper button.add{background:var(--gold); border-color:var(--gold); color:var(--on-gold)}
.stepper button.add:hover{background:var(--gold-2); border-color:var(--gold-2)}
.stepper button:active{transform:scale(.92)}
.stepper button:disabled{opacity:.25; border-color:var(--hair); background:transparent; color:var(--faint)}
.stepper .q{
  font-variant-numeric:tabular-nums; font-weight:500; font-size:var(--t-sm);
  min-width:22px; text-align:center; display:none; color:var(--ink);
}
.stepper .minus{display:none}
.stepper.on .minus{display:grid}
.stepper.on .q{display:block}

/* ─────────── CHI TIẾT ─────────── */
.badge{                              /* số hiệu món */
  font-size:var(--t-xs); font-weight:500; letter-spacing:.12em;
  font-variant-numeric:tabular-nums;
  color:var(--gold); background:transparent;
  border:1px solid var(--hair); border-radius:2px; padding:3px 7px;
}
.tag{
  font-size:var(--t-xs); letter-spacing:.18em; text-transform:uppercase; font-weight:500;
  color:var(--sage); border:0; border-bottom:1px solid currentColor;
  border-radius:0; padding:0 0 1px 0;
}
.tag.nut{color:var(--gold)}
.tag.sold{color:var(--copper)}
.spice{display:inline-flex; gap:4px; align-items:center}
.spice i{width:4px; height:4px; border-radius:50%; background:var(--copper); display:block}
.price{
  font-variant-numeric:tabular-nums; font-weight:500; font-size:var(--t-md);
  letter-spacing:.03em; color:var(--ink);
}

.theme-btn{
  background:transparent; border:1px solid var(--hair); color:var(--muted);
  border-radius:50%; width:32px; height:32px; cursor:pointer; padding:0;
  display:grid; place-items:center; font-size:12px;
  transition:border-color .2s, color .2s;
}
.theme-btn:hover{border-color:var(--gold); color:var(--gold)}


/* ─────────── LOGO ─────────── */
.logo{height:36px;width:auto;display:block;color:var(--ink)}
.logo .lg-jp{font-family:'Noto Sans JP',sans-serif;font-size:11px;font-weight:500;letter-spacing:1.5px}
.logo .lg-wm{font-family:'Jost',sans-serif;font-size:34px;font-weight:600;letter-spacing:3.4px}
.logo .lg-tag{font-family:'Jost',sans-serif;font-size:9.6px;font-weight:400;letter-spacing:.55px}
.logo.lg-lg{height:52px}
.gate .logo{margin:0 auto 34px}

/* ─────────── TOAST ─────────── */
.toast{
  position:fixed; left:50%; bottom:30px; z-index:99; max-width:88vw;
  transform:translate(-50%,150%); transition:transform .35s cubic-bezier(.16,1,.3,1), visibility .35s;
  visibility:hidden;
  background:var(--ink); color:var(--bg);
  padding:14px 24px; border-radius:3px;
  font-size:var(--t-xs); font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  box-shadow:var(--lift);
}
.toast.on{transform:translate(-50%,0); visibility:visible}
.toast.bad{background:var(--copper); color:#fff}

/* ─────────── Ô NHẬP ─────────── */
input,textarea,select{
  width:100%; background:transparent; color:var(--ink);
  border:0; border-bottom:1px solid var(--hair);
  border-radius:0; padding:12px 2px;
  font-family:'Jost',sans-serif; font-size:var(--t-md);
  transition:border-color .25s;
}
input:focus,textarea:focus,select:focus{outline:none; border-bottom-color:var(--gold)}
input::placeholder,textarea::placeholder{color:var(--faint)}
.pin-input{
  text-align:center; letter-spacing:.7em; text-indent:.7em;
  font-size:var(--t-xl); font-weight:300; padding:18px 2px;
  font-variant-numeric:tabular-nums;
}

/* ─────────── MÀN ĐĂNG NHẬP ─────────── */
.gate{max-width:300px; margin:17vh auto; padding:0 24px; text-align:center}
.gate .brand{font-size:30px; display:block}
.gate .brand-sub{margin-bottom:38px}
.gate p{color:var(--muted); font-size:var(--t-sm); margin:0 0 22px; line-height:1.6}
.gate .btn{width:100%; margin-top:26px}
.gate .err{color:var(--copper); font-size:var(--t-xs); margin-top:16px; min-height:18px;
  letter-spacing:.06em}
.ver{font-size:11px; color:var(--faint); letter-spacing:.2em; text-transform:uppercase}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}