/* TTPOST E-Mall — design tokens & base typography */
:root {
  --brand-red: #C8102E;
  --brand-red-dark: #8B0000;
  --brand-ink: #1F2937;
  --brand-ink-soft: #4B5563;
  --brand-trust: #2D6A4F;
  --brand-business: var(--brand-trust); /* Business persona accent; aliased for future divergence */
  --brand-trust-soft: #DCFCE7;
  --brand-alert: #FBBF24;
  --brand-alert-soft: #FEF3C7;
  --brand-surface: #F8FAFC;
  --brand-card: #FFFFFF;
  --brand-border: #E2E8F0;
  --brand-muted: #94A3B8;
  --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-pop: 0 8px 24px rgba(15, 23, 42, 0.10);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
}

html { font-family: var(--font-body); color: var(--brand-ink); background: var(--brand-surface); }
body { margin: 0; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; }
a { color: var(--brand-red); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

.btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: var(--radius-sm);
  font-weight: 500; font-size: 14px; border: 1px solid transparent; cursor: pointer; transition: all .15s; }
.btn-primary { background: var(--brand-red); color: white; }
.btn-primary:hover { background: var(--brand-red-dark); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--brand-ink); border-color: var(--brand-border); }
.btn-ghost:hover { background: var(--brand-surface); text-decoration: none; }