/* Hallmark · genre: editorial · theme: Studio · design-system: design.md · designed-as-app */
/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 */

html,
body {
  overflow-x: clip;
}

:root {
  --lm-cream: var(--color-paper);
  --lm-brown: var(--color-ink);
  --lm-yellow: var(--color-accent);
  --lm-blue: var(--color-accent-2);
  --pt-logo-text: "Photobooth Studio";
  --pt-logo-url: none;

  --lm-brown-80: color-mix(in oklab, var(--lm-brown) 80%, transparent);
  --lm-brown-65: color-mix(in oklab, var(--lm-brown) 65%, transparent);
  --lm-brown-40: color-mix(in oklab, var(--lm-brown) 40%, transparent);
  --lm-brown-15: color-mix(in oklab, var(--lm-brown) 15%, transparent);
  --lm-brown-08: color-mix(in oklab, var(--lm-brown) 8%, transparent);

  --lm-display: var(--font-display);
  --lm-body: var(--font-body);
  --lm-gap: var(--space-sm);
  --lm-gap-l: var(--space-lg);
  --lm-radius: var(--radius-input);
  --lm-max: 880px;
}

/* ── Hoạ tiết sọc thương hiệu ────────────────────────────────────────────── */
.lm-stripes {
  background-color: var(--lm-cream);
  background-image: none;
}

/* ── Logo ───────────────────────────────────────────────────────────────── */
.lm-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  color: var(--lm-brown);
  background: transparent center / contain no-repeat;
  aspect-ratio: 2.4 / 1;
  text-align: center;
}
.lm-logo::before {
  content: var(--pt-logo-text);
  font-family: var(--lm-display);
  font-weight: 600;
  font-size: clamp(18px, 7vw, 30px);
  letter-spacing: -.02em;
  line-height: 1.05;
  font-style: normal;
}
.lm-logo--cream { color: var(--lm-cream); }
.lm-logo.has-custom-logo::before { content: ""; }
.lm-logo.has-custom-logo {
  background-image: var(--pt-logo-url);
}
.side-logo::before { font-size: 15px; line-height: 1.15; }

/* Khoảng trống an toàn quanh logo theo guideline (4x trên tổng 17x chiều
   cao khối) ≈ 23% chiều cao. Luôn bọc logo trong lớp này, đừng đặt sát mép. */
.lm-logo-safe { padding: 6% 0; }

/* ── Nút ──────────────────────────────────────────────────────────────────
   Chỉ hai kiểu: nâu đặc (hành động chính) và viền nâu (hành động phụ).
   KHÔNG làm nút nền vàng/xanh — chữ trên đó không đạt tương phản. */
.lm-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 54px;
  padding: 16px 24px;
  min-width: 0;
  border: var(--rule-hairline) solid var(--lm-brown);
  border-radius: var(--lm-radius);
  background: var(--lm-brown);
  color: var(--lm-cream);
  font-family: var(--lm-body);
  font-size: var(--text-sm); font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform var(--dur-micro) var(--ease-out),
    opacity var(--dur-micro) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .lm-btn:hover { transform: translateY(-1px); }
}
.lm-btn:active { opacity: .84; transform: translateY(1px); }
.lm-btn[disabled],
.lm-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.lm-btn[aria-busy="true"] { cursor: progress; opacity: .72; }
.lm-btn[data-state="error"] { border-color: var(--color-danger); }
.lm-btn[data-state="success"] { border-color: var(--color-success); }

.lm-btn--ghost { background: transparent; color: var(--lm-brown); }
@media (hover: hover) and (pointer: fine) {
  .lm-btn--ghost:hover { background: var(--lm-brown); color: var(--lm-cream); }
}

.lm-btn--small { width: auto; min-height: 40px; padding: 8px 20px; font-size: 13px; }

.lm-display {
  font-family: var(--lm-display);
  font-weight: 600;
  font-style: normal;
  letter-spacing: -.025em;
  text-transform: none;
  line-height: 1.12;
  color: var(--lm-brown);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ── Nền tảng ─────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--lm-cream);
  color: var(--lm-brown);
  font-family: var(--lm-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.lm-wrap { width: 100%; max-width: var(--lm-max); margin: 0 auto; padding: 0 var(--space-md); }

.lm-muted { color: var(--lm-brown-65); }

.lm-hidden { display: none !important; }

:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 150ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 150ms !important;
  }
}