/* brand.css — TrinityOne "Halo" design language tokens + core primitives */

:root {
  /* ── Core palette ── */
  --paper:      #F4EEE2;
  --paper-soft: #FBF6EC;
  --surface:    #FFFDF8;
  --ink:        #221C16;
  --ink-2:      #6B6052;
  --ink-3:      #736958;  /* a11y: darkened from #A89E8E (~2.6:1, failed WCAG AA) → 5.4:1 on --surface, 4.75:1 on --paper. App is light-only, so one value suffices. */
  --line:       rgba(34,28,22,0.10);
  --line-2:     rgba(34,28,22,0.05);

  --clay:       #C25A38;
  --clay-deep:  #9C4327;
  --clay-ink:   #A8462A;
  --clay-soft:  #F3DECF;

  --gold:       #C8962E;
  --gold-soft:  #E0B860;
  --gold-tint:  #F3E4C4;

  --sage:       #5E8C6A;
  --sage-soft:  #D8E6DC;

  --midnight:   #17120B;
  --midnight-2: #241C12;

  /* ── Color roles ──
     --clay      PRIMARY. Brand actions, primary CTAs, active states, the wordmark "One".
     --gold      SPARK. The Halo's center light + rare "live/unread" accents. Use sparingly.
     --sage      FUNCTIONAL. Success / giving-confirmed only — never decorative.
     --midnight  DARK SURFACE. Night mode, focus moments, footers.
     paper/surface/ink* = warm neutrals carrying everything else. */

  /* ── Type ── */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-serif:   'Newsreader', Georgia, serif;
  --font-ui:      'Sora', system-ui, sans-serif;

  /* ── Radii / shadow / motion ── */
  --r-sm: 10px;  --r-md: 16px;  --r-lg: 24px;  --r-xl: 32px;
  --shadow-sm: 0 1px 2px rgba(34,28,16,.05), 0 6px 18px rgba(34,28,16,.06);
  --shadow-md: 0 4px 12px rgba(34,28,16,.10), 0 20px 44px rgba(34,28,16,.12);
  --shadow-lg: 0 10px 30px rgba(34,28,16,.14), 0 40px 80px rgba(34,28,16,.18);
  --ease: cubic-bezier(.32,.72,0,1);
  --spark: var(--gold);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--gold-soft); color: var(--ink); }

/* ── Halo mark (uses <use href="#to-halo">) ── */
.halo { display: inline-block; width: 1em; height: 1em; color: var(--ink); --spark: var(--clay); }
@keyframes halo-draw { from { stroke-dashoffset: 226; opacity: 0; } to { stroke-dashoffset: 0; opacity: 1; } }
@keyframes spark-in  { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* ── Buttons ── */
.to-btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-ui); font-weight: 700; font-size: 15px;
  padding: 14px 24px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--ink); color: var(--paper);
  transition: transform .2s var(--ease), box-shadow .2s, background .2s;
  text-decoration: none; line-height: 1;
}
.to-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.to-btn--clay { background: var(--clay); color: #fff; }
.to-btn--gold { background: var(--gold); color: var(--midnight); }
.to-btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.to-btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ── Pill / eyebrow ── */
.to-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-ui); font-weight: 700; font-size: 12px;
  letter-spacing: 1.4px; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px;
  background: var(--clay-soft); color: var(--clay-ink);
}

/* ── Scripture treatment ── */
.scripture {
  font-family: var(--font-serif); font-weight: 400;
  line-height: 1.45; text-wrap: pretty; font-optical-sizing: auto;
}
.scripture .drop { color: var(--clay); }

/* ── Wordmark ──
   CANONICAL LOCKUP: "TrinityOne" — one word, camelCase. Never "TRINITYONE",
   never "Trinity One". "Trinity" in --ink, "One" in --clay (on dark: --gold-soft).
   Sora 800, tight tracking. Tagline "Read · Gather · Share" may be set uppercase. */
.wordmark { display: inline-flex; align-items: center; gap: 12px; }
.wordmark .wm-text {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.5px;
  line-height: .95; color: var(--ink);
}
.wordmark .wm-text .one { color: var(--clay); }
.wordmark .wm-tag {
  font-family: var(--font-ui); font-weight: 600; font-size: .42em;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink-2); margin-top: 4px;
}

/* ── Accessibility: a visible keyboard-focus ring. Many console controls set inline outline:none,
   so !important is needed to guarantee focus is never invisible for keyboard/switch users. ── */
:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; border-radius: 4px; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--clay) !important; outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}