/* ── DESIGN TOKENS ────────────────────────────────────────────────────────── */
:root {
  --bg: #faf8f5;
  --surface: #ffffff;
  --surface2: #f5f0eb;
  --border: #ede8e1;
  --border-width: 1.5px;        /* FIX #10: single border-width token */
  --text: #2c2825;
  --text-muted: #8c7f74;
  --accent: #e8a598;
  --accent2: #b5cce4;
  --accent3: #c5d9b5;
  --accent4: #7b5ea7;           /* purple — used for links, chips, active states */
  --accent5: #f0d49a;
  --hover: #fef2ef;
  --shadow: 0 2px 16px rgba(44, 40, 37, 0.07);
  --shadow-lg: 0 8px 40px rgba(44, 40, 37, 0.12);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --green: #42b883;
  --red: #e63946;
  --orange: #e07a2f;

  /* ── Button colour tokens — single source of truth ── */
  /* Register / Submit — orange */
  --btn-register-bg:     #e8673a;
  --btn-register-hover:  #d45a2e;
  --btn-register-shadow: rgba(232, 103, 58, 0.45);
  /* Share — blue */
  --btn-share-bg:        #2a56b8;
  --btn-share-hover:     #1e45a0;
  /* Back / Secondary — surface */
  --btn-back-bg:         var(--surface);
  --btn-back-color:      var(--text);
  --btn-back-border:     var(--border);
}

/* ── DARK MODE OVERRIDES ──────────────────────────────────────────────────── */
.dark {
  --bg: #1e1b18;
  --surface: #2a2520;
  --surface2: #33302b;
  --border: #403c36;
  --text: #f0ece6;
  --text-muted: #9c9088;
  --hover: #3a3028;
  --shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.4);
}

/* ── BASE RESET ───────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  transition: background var(--transition), color var(--transition);
}