/* ═══════════════════════════════════════════════════════════════════════
   MATCHA SOFT 3D — Design System Foundation
   ═══════════════════════════════════════════════════════════════════════
   Version: v11.34 | Sprint: S39 | Created: 2026-05-17
   Phong cách: matcha-tone trầm, soft accessible cho mọi lứa tuổi,
               smart color hierarchy, rounded corners, 3D pressable depth.
   Triết lý: KHÔNG loud, KHÔNG neon, KHÔNG cyberpunk.
             Giáo dục dịu, premium kín đáo, modern-cute.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── PALETTE: Matcha (PRIMARY) ── xanh trà trầm, warm undertone */
  --msd-matcha-50:  #f0f5e8;   /* tint nhẹ nhất - chỉ dùng cho text-on-dark */
  --msd-matcha-100: #d4e0bf;   /* highlight chip nhỏ */
  --msd-matcha-300: #8aa674;   /* hover state, lighter accents */
  --msd-matcha-500: #5a8045;   /* PRIMARY — CTA chính, active state */
  --msd-matcha-700: #3d5a30;   /* deep — pressed, focus ring */
  --msd-matcha-900: #243517;   /* darkest — shadow base */

  /* ── PALETTE: Amber (SECONDARY) ── hổ phách warm, dùng cho action phụ */
  --msd-amber-100: #f3e3c4;
  --msd-amber-300: #e4c697;
  --msd-amber-500: #c89968;   /* SECONDARY */
  --msd-amber-700: #946d3e;
  --msd-amber-900: #5a4124;

  /* ── PALETTE: Bronze (ACCENT) ── kim loại cổ điển, dùng cho icon/divider */
  --msd-bronze-300: #d4b08c;
  --msd-bronze-500: #b8895a;   /* ACCENT */
  --msd-bronze-700: #7d5a36;

  /* ── PALETTE: Crimson Dust (DANGER) ── đỏ trầm muối, KHÔNG đỏ tươi */
  --msd-crimson-300: #c98484;
  --msd-crimson-500: #a85d5d;  /* DANGER — warning, delete confirm */
  --msd-crimson-700: #7a3e3e;

  /* ── PALETTE: Ink Wash (SURFACE) ── nền hơi xanh-đen, KHÔNG đen tuyền */
  --msd-ink-deepest: #14181a;  /* page background sâu nhất */
  --msd-ink-deep:    #1b1f1d;  /* card background mặc định */
  --msd-ink-mid:     #252a26;  /* card hover, surface raised */
  --msd-ink-light:   #2f3530;  /* surface highlighted, input bg */
  --msd-ink-edge:    #3a423d;  /* border subtle */

  /* ── PALETTE: Paper Cream (TEXT) ── chữ ngà ấm, KHÔNG trắng tinh */
  --msd-paper-primary:   #f0e4cc;  /* H1, body chính */
  --msd-paper-secondary: #cfc2a3;  /* H2, description */
  --msd-paper-muted:     #9b8e76;  /* hint, caption */
  --msd-paper-dim:       #6b5f4d;  /* disabled, watermark */

  /* ── SEMANTIC TOKENS (alias cho dễ đọc) ── */
  --msd-bg:         var(--msd-ink-deepest);
  --msd-surface:    var(--msd-ink-deep);
  --msd-surface-2:  var(--msd-ink-mid);
  --msd-surface-3:  var(--msd-ink-light);
  --msd-border:     var(--msd-ink-edge);
  --msd-text:       var(--msd-paper-primary);
  --msd-text-soft:  var(--msd-paper-secondary);
  --msd-text-mute:  var(--msd-paper-muted);
  --msd-primary:    var(--msd-matcha-500);
  --msd-primary-hover: var(--msd-matcha-300);
  --msd-primary-deep:  var(--msd-matcha-700);
  --msd-secondary:  var(--msd-amber-500);
  --msd-accent:     var(--msd-bronze-500);
  --msd-danger:     var(--msd-crimson-500);

  /* ── RADIUS scale ── bo tròn nhất quán */
  --msd-radius-sm: 8px;
  --msd-radius-md: 14px;   /* default — input, chip */
  --msd-radius-lg: 20px;   /* card */
  --msd-radius-xl: 28px;   /* large card, modal */
  --msd-radius-full: 999px;

  /* ── SHADOW: 3D pressable depth ──
     Triết lý: 1 lớp ambient (mờ) + 1 lớp floor (đậm) → cảm giác nổi nhẹ */
  --msd-shadow-flat:  0 1px 2px rgba(0,0,0,0.25);
  --msd-shadow-soft:  0 2px 0 rgba(0,0,0,0.35),
                       0 4px 12px rgba(0,0,0,0.25);
  --msd-shadow-md:    0 4px 0 rgba(0,0,0,0.4),
                       0 8px 18px rgba(0,0,0,0.3),
                       inset 0 1px 0 rgba(255,255,255,0.06);
  --msd-shadow-lg:    0 6px 0 rgba(0,0,0,0.45),
                       0 12px 28px rgba(0,0,0,0.35),
                       inset 0 1px 0 rgba(255,255,255,0.08);
  --msd-shadow-press: 0 1px 0 rgba(0,0,0,0.4),
                       0 2px 6px rgba(0,0,0,0.3),
                       inset 0 1px 0 rgba(255,255,255,0.04);

  /* ── TRANSITION timing — material easing ── */
  --msd-ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --msd-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --msd-dur-fast: 0.15s;
  --msd-dur-base: 0.22s;
  --msd-dur-slow: 0.4s;

  /* ── PLANT PATTERN backgrounds (SVG data-URI, opacity điều chỉnh qua background-color) ── */
  --msd-pattern-tea-leaf: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><path d='M30 8c-7 4-12 11-12 18 0 8 5 14 12 18 7-4 12-10 12-18 0-7-5-14-12-18zm0 5c4 3 8 8 8 13 0 6-4 11-8 14-4-3-8-8-8-14 0-5 4-10 8-13z' fill='%235a8045' fill-opacity='0.12'/></svg>");
  --msd-pattern-maple: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><path d='M40 12l5 13 14-2-9 11 11 9-13 5 2 14-11-9-9 11-5-13-14 2 9-11-11-9 13-5-2-14 11 9z' fill='%23c89968' fill-opacity='0.10'/></svg>");
  --msd-pattern-peony: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='70' height='70' viewBox='0 0 70 70'><circle cx='35' cy='35' r='8' fill='%23b8895a' fill-opacity='0.14'/><circle cx='35' cy='20' r='6' fill='%23b8895a' fill-opacity='0.10'/><circle cx='35' cy='50' r='6' fill='%23b8895a' fill-opacity='0.10'/><circle cx='20' cy='35' r='6' fill='%23b8895a' fill-opacity='0.10'/><circle cx='50' cy='35' r='6' fill='%23b8895a' fill-opacity='0.10'/></svg>");
}

/* ═══════════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════ */

/* ── CARDS ── */
.msd-card {
  background: var(--msd-surface);
  color: var(--msd-text);
  border: 1px solid var(--msd-border);
  border-radius: var(--msd-radius-lg);
  padding: 18px;
  box-shadow: var(--msd-shadow-md);
  transition: transform var(--msd-dur-base) var(--msd-ease),
              box-shadow var(--msd-dur-base) var(--msd-ease);
  position: relative;
  overflow: hidden;
}
.msd-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--msd-shadow-lg);
}

/* Variant: primary (matcha gradient highlight) */
.msd-card--primary {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--msd-matcha-500) 18%, var(--msd-surface)),
      var(--msd-surface) 60%);
  border-color: color-mix(in srgb, var(--msd-matcha-500) 35%, transparent);
}
.msd-card--secondary {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--msd-amber-500) 16%, var(--msd-surface)),
      var(--msd-surface) 60%);
  border-color: color-mix(in srgb, var(--msd-amber-500) 30%, transparent);
}
.msd-card--accent {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--msd-bronze-500) 15%, var(--msd-surface)),
      var(--msd-surface) 60%);
  border-color: color-mix(in srgb, var(--msd-bronze-500) 28%, transparent);
}
.msd-card--danger {
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--msd-crimson-500) 14%, var(--msd-surface)),
      var(--msd-surface) 60%);
  border-color: color-mix(in srgb, var(--msd-crimson-500) 28%, transparent);
}

/* Card với plant pattern decoration (góc dưới phải) */
.msd-card--pattern-tea {
  background-image: var(--msd-pattern-tea-leaf);
  background-repeat: repeat;
  background-position: right bottom;
  background-size: 90px 90px;
}
.msd-card--pattern-maple {
  background-image: var(--msd-pattern-maple);
  background-repeat: repeat;
  background-size: 110px 110px;
}
.msd-card--pattern-peony {
  background-image: var(--msd-pattern-peony);
  background-repeat: repeat;
  background-size: 100px 100px;
}

/* ── BUTTONS ── 3D pressable */
.msd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border-radius: var(--msd-radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  transition: transform var(--msd-dur-fast) var(--msd-ease),
              box-shadow var(--msd-dur-fast) var(--msd-ease),
              background var(--msd-dur-base) var(--msd-ease);
  background: var(--msd-surface-2);
  color: var(--msd-text);
  box-shadow: var(--msd-shadow-soft);
}
.msd-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--msd-shadow-md);
}
.msd-btn:active {
  transform: translateY(1px);
  box-shadow: var(--msd-shadow-press);
}

.msd-btn--primary {
  background: linear-gradient(135deg, var(--msd-matcha-500), var(--msd-matcha-700));
  color: var(--msd-paper-primary);
  border-color: color-mix(in srgb, var(--msd-matcha-500) 50%, transparent);
  box-shadow: 0 4px 0 var(--msd-matcha-900),
              0 8px 16px rgba(0,0,0,0.25),
              inset 0 1px 0 rgba(255,255,255,0.15);
}
.msd-btn--primary:hover {
  background: linear-gradient(135deg, var(--msd-matcha-300), var(--msd-matcha-500));
  box-shadow: 0 6px 0 var(--msd-matcha-900),
              0 10px 20px rgba(0,0,0,0.3),
              inset 0 1px 0 rgba(255,255,255,0.2);
}
.msd-btn--primary:active {
  box-shadow: 0 1px 0 var(--msd-matcha-900),
              0 2px 4px rgba(0,0,0,0.2),
              inset 0 1px 0 rgba(255,255,255,0.1);
}

.msd-btn--secondary {
  background: linear-gradient(135deg, var(--msd-amber-500), var(--msd-amber-700));
  color: var(--msd-paper-primary);
  border-color: color-mix(in srgb, var(--msd-amber-500) 50%, transparent);
  box-shadow: 0 4px 0 var(--msd-amber-900),
              0 8px 16px rgba(0,0,0,0.25),
              inset 0 1px 0 rgba(255,255,255,0.15);
}
.msd-btn--secondary:hover {
  background: linear-gradient(135deg, var(--msd-amber-300), var(--msd-amber-500));
}

.msd-btn--ghost {
  background: transparent;
  color: var(--msd-text-soft);
  border-color: var(--msd-border);
  box-shadow: none;
}
.msd-btn--ghost:hover {
  background: var(--msd-surface-2);
  color: var(--msd-text);
}

.msd-btn--danger {
  background: linear-gradient(135deg, var(--msd-crimson-500), var(--msd-crimson-700));
  color: var(--msd-paper-primary);
  box-shadow: 0 4px 0 rgba(80, 20, 20, 0.6),
              0 8px 16px rgba(0,0,0,0.25),
              inset 0 1px 0 rgba(255,255,255,0.12);
}

/* ── ICON CHIP — round icon container ── */
.msd-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--msd-radius-md);
  background: var(--msd-surface-3);
  color: var(--msd-text);
  font-size: 18px;
  box-shadow: var(--msd-shadow-soft);
  border: 1px solid var(--msd-border);
}
.msd-icon-chip--lg {
  width: 56px; height: 56px;
  font-size: 22px;
  border-radius: var(--msd-radius-lg);
}
.msd-icon-chip--primary {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--msd-matcha-500) 40%, var(--msd-surface-3)),
    var(--msd-surface-3));
  color: var(--msd-matcha-100);
  border-color: color-mix(in srgb, var(--msd-matcha-500) 45%, transparent);
}
.msd-icon-chip--secondary {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--msd-amber-500) 40%, var(--msd-surface-3)),
    var(--msd-surface-3));
  color: var(--msd-amber-100);
  border-color: color-mix(in srgb, var(--msd-amber-500) 45%, transparent);
}
.msd-icon-chip--accent {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--msd-bronze-500) 40%, var(--msd-surface-3)),
    var(--msd-surface-3));
  color: var(--msd-bronze-300);
  border-color: color-mix(in srgb, var(--msd-bronze-500) 45%, transparent);
}
.msd-icon-chip--danger {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--msd-crimson-500) 40%, var(--msd-surface-3)),
    var(--msd-surface-3));
  color: var(--msd-crimson-300);
  border-color: color-mix(in srgb, var(--msd-crimson-500) 45%, transparent);
}

/* ── TEXT HELPERS ── */
.msd-title    { color: var(--msd-text);      font-weight: 700; }
.msd-subtitle { color: var(--msd-text-soft); font-weight: 500; }
.msd-caption  { color: var(--msd-text-mute); font-size: 0.78rem; }

/* ── BADGE ── small label */
.msd-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: var(--msd-radius-full);
  background: var(--msd-surface-3);
  color: var(--msd-text-soft);
  border: 1px solid var(--msd-border);
}
.msd-badge--primary { background: color-mix(in srgb, var(--msd-matcha-500) 25%, var(--msd-surface-3)); color: var(--msd-matcha-100); }
.msd-badge--secondary { background: color-mix(in srgb, var(--msd-amber-500) 25%, var(--msd-surface-3)); color: var(--msd-amber-100); }
.msd-badge--danger { background: color-mix(in srgb, var(--msd-crimson-500) 30%, var(--msd-surface-3)); color: var(--msd-paper-primary); border-color: color-mix(in srgb, var(--msd-crimson-500) 40%, transparent); }

/* ── DIVIDER ── */
.msd-divider {
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--msd-border),
    transparent);
  margin: 14px 0;
}

/* ── ANIMATION: gentle float (cho icon nhỏ, không loud) ── */
@keyframes msd-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.msd-animate-float { animation: msd-float 3s ease-in-out infinite; }

/* ── ANIMATION: subtle pulse (cho indicator) ── */
@keyframes msd-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(0.95); }
}
.msd-animate-pulse { animation: msd-pulse 2s ease-in-out infinite; }