/* ── Tadoom shared styles — Indigo Dusk ────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #F5F5FA;
  --bg-2:       #EEEEF6;
  --bg-3:       #E6E6F0;

  --fg:         #16162A;
  --fg-muted:   #5C5C80;

  --primary:    #4F46E5;
  --secondary:  #7C3AED;
  --accent:     #A78BFA;

  --card:       #FFFFFF;
  --card-2:     #F8F8FD;
  --border:     #CCCCE0;
  --border-2:   #ABABCC;

  --font-head: 'DM Serif Display', serif;
  --font-body: 'DM Sans', sans-serif;
}

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--fg); font-family: var(--font-body); line-height: 1.6; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Logo */
.logo { text-decoration: none; display: flex; align-items: center; width: fit-content; }
.logo-graphic    { display: block; height: 52px; width: auto; flex-shrink: 0; }
.logo-graphic-sm { display: block; height: 52px; width: auto; }

/* Labels & dividers */
.section-label { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--primary); margin-bottom: 12px; }
.divider { width: 40px; height: 2px; background: var(--primary); margin: 0 auto 32px; border-radius: 2px; opacity: 0.5; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; border-radius: 8px; font-family: var(--font-body); font-weight: 600; font-size: 0.875rem; cursor: pointer; border: none; transition: opacity 0.2s, transform 0.15s; text-decoration: none; }
.btn:hover  { opacity: 0.88; transform: scale(1.03); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--primary); color: #fff; }

/* Footer */
footer { padding: 20px 24px; border-top: 1px solid var(--border); font-size: 0.78rem; color: var(--fg-muted); text-align: center; }
footer a { color: var(--primary); text-decoration: none; }
footer a:hover { text-decoration: underline; }