/* ============================================================================
 * brand.css — StudyDecoder editorial design tokens (rebrand foundation)
 * ----------------------------------------------------------------------------
 * The single source of truth for the new visual identity: warm ink + paper,
 * a confident amber accent, a serif display face (Fraunces) over a clean
 * grotesque body (Inter). Deliberately flat & layered — no purple, no floaty
 * blob, no glassmorphism wash.
 *
 * Rollout note: Phase 1 migrates the legacy purple literals (#6c63ff /
 * rgba(108,99,255,…)) onto these tokens site-wide. During Phase 0 this file
 * only establishes the variables + a few editorial primitives; pages opt in.
 * ========================================================================== */

:root {
  /* ── Surfaces (dark / default) ── */
  --bd-ink:        #14141a;   /* base background  */
  --bd-ink-2:      #1c1c24;   /* raised surface   */
  --bd-ink-3:      #25252f;   /* hover / inset    */
  --bd-ink-rgb:    20, 20, 26;

  /* ── Text ── */
  --bd-text:       #f3efe7;   /* warm off-white   */
  --bd-text-dim:   rgba(243, 239, 231, 0.66);
  --bd-text-faint: rgba(243, 239, 231, 0.42);

  /* ── Hairlines / borders (warm, not blue) ── */
  --bd-line:       rgba(243, 239, 231, 0.12);
  --bd-line-soft:  rgba(243, 239, 231, 0.07);

  /* ── Signature accent: amber. Used sparingly — CTAs, marks, focus. ── */
  --bd-accent:        #f5a623;
  --bd-accent-rgb:    245, 166, 35;
  --bd-accent-hover:  #ffb73d;
  --bd-accent-ink:    #1a1206;            /* text on amber fills */
  --bd-accent-soft:   rgba(245, 166, 35, 0.12);
  --bd-accent-line:   rgba(245, 166, 35, 0.34);

  /* ── Supporting hues (kept muted; status colours stay conventional) ── */
  --bd-paper:      #faf8f3;   /* light / paper sections */
  --bd-paper-ink:  #1d1b16;   /* text on paper          */
  --bd-success:    #3f9b6d;
  --bd-danger:     #d65745;

  /* ── Type ── */
  --bd-font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --bd-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ── Shape (flatter, more deliberate than the old pills) ── */
  --bd-radius:    10px;
  --bd-radius-lg: 16px;
  --bd-shadow:    0 1px 2px rgba(0,0,0,0.4), 0 12px 32px rgba(0,0,0,0.32);
}

:root[data-theme="light"] {
  --bd-ink:        var(--bd-paper);
  --bd-ink-2:      #ffffff;
  --bd-ink-3:      #f1ede4;
  --bd-text:       var(--bd-paper-ink);
  --bd-text-dim:   rgba(29, 27, 22, 0.66);
  --bd-text-faint: rgba(29, 27, 22, 0.42);
  --bd-line:       rgba(29, 27, 22, 0.12);
  --bd-line-soft:  rgba(29, 27, 22, 0.07);
  --bd-shadow:     0 1px 2px rgba(31,27,22,0.06), 0 12px 30px rgba(31,27,22,0.10);
}

/* ── Editorial primitives (opt-in via .bd-* so they don't clash in Phase 0) ── */

.bd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--bd-font-body); font-weight: 600; font-size: 0.96rem;
  padding: 12px 22px; border-radius: var(--bd-radius); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; line-height: 1;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.bd-btn-primary { background: var(--bd-accent); color: var(--bd-accent-ink); }
.bd-btn-primary:hover { background: var(--bd-accent-hover); }
.bd-btn-ghost { background: transparent; color: var(--bd-text); border-color: var(--bd-line); }
.bd-btn-ghost:hover { border-color: var(--bd-text-dim); background: var(--bd-ink-2); }

.bd-card {
  background: var(--bd-ink-2); border: 1px solid var(--bd-line);
  border-radius: var(--bd-radius-lg); padding: 20px;
}

/* ── Type identity, applied site-wide ──
 * !important so it wins over the per-page inline body/heading font stacks
 * without editing 50 files. Directly-set font-family on icon elements still
 * wins (a directly-applied value beats an inherited one), so icon fonts are
 * unaffected. Headings limited to h1/h2 — small h3 labels stay on the body
 * face for an editorial (not over-serifed) feel. */
body { font-family: var(--bd-font-body) !important; }
h1, h2 { font-family: var(--bd-font-display) !important; letter-spacing: -0.01em; }

/* Inline icon placeholders (hydrated by icons.js). Sized to the text and
   inheriting its colour so they sit naturally inside headings/labels. */
i[data-ic] { display: inline-flex; align-items: center; vertical-align: -0.14em; color: inherit; font-style: normal; }
i[data-ic] svg { width: 1em; height: 1em; }

/* Amber underline mark for emphasised words in serif headings. */
.bd-mark {
  font-style: normal;
  background-image: linear-gradient(var(--bd-accent), var(--bd-accent));
  background-repeat: no-repeat;
  background-position: 0 92%;
  background-size: 100% 0.10em;
}