/* ═══════════════════════════════════════════════════════════════
   disputation.app — Design Tokens
   Shared by: main app (/app.html), landing page (/),
              arc tool (/BibleCharting/index.html)
   Load this first, then each page's own component CSS.
   Font imports stay per-page — they differ by design intent.
═══════════════════════════════════════════════════════════════ */

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

/* ── Light theme (parchment + brick red) ── */
:root{
  /* Design palette — primary tokens */
  --paper:        #f7f3eb;
  --paper-2:      #ede7d8;
  --paper-3:      #f9f5ee;
  --surface:      #ffffff;
  --surface-2:    #fbf8f1;
  --ink:          #1a1a1a;
  --ink-soft:     #3a3a3a;
  --muted:        #6b6b6b;
  --muted-2:      #8e8a82;
  --line:         #2c2c2c;
  --line-soft:    #d8d2c4;
  --rule:         #c8c0ad;
  --accent-red:   #c44a3d;
  --accent-red-d: #9a3528;
  --accent-blue:  #3b6ea8;
  --accent-green: #6f8f57;
  --accent-amber: #b48a2a;
  --hl-pink:      #f1d9d4;
  --hl-blue:      #d9e3ee;
  --hl-green:     #dde7d3;
  --hl-amber:     #ecdfb8;
  --tint-red:     #fcf3f2;
  --tint-blue:    #f3f6fa;
  --tint-green:   #f4f7ee;
  --tint-amber:   #faf3df;
  --shadow-card:  0 1px 0 rgba(0,0,0,.04), 0 6px 22px -10px rgba(40,30,15,.18);
  --shadow-rise:  0 1px 0 rgba(0,0,0,.05), 0 14px 40px -14px rgba(40,30,15,.28);
  --brand-accent: var(--accent-red);

  /* Type families */
  --serif:        'Crimson Pro', Georgia, 'Times New Roman', serif;
  --sans:         'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:         'IBM Plex Mono', ui-monospace, monospace;

  /* Radii */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 14px;
  --r-pill: 999px;

  /* ── Legacy semantic tokens — rebound to the new palette ── */
  --parchment:   var(--paper);
  --parchment2:  var(--paper-2);
  --ink2:        var(--ink-soft);
  --gold:        var(--accent-red);
  --gold2:       #e36054;
  --text-light:  #f0ece2;
  --text-dark:   var(--ink);
  --bg:          var(--paper);
  --border:      var(--rule);
  --accent:      var(--accent-red);
  --accent2:     var(--accent-blue);
  --accent-bg:   var(--paper-2);
  --text:        var(--ink);
  --tag:         var(--paper-2);
  --danger:      var(--accent-red-d);
  --success:     var(--accent-green);
}

/* ── Dark theme — supports both `html.dark` (legacy app toggle)
       and `:root[data-theme="dark"]` (new design toggle) ── */
html.dark,
:root[data-theme="dark"]{
  --paper:        #14141a;
  --paper-2:      #1c1c24;
  --paper-3:      #181820;
  --surface:      #1f1f28;
  --surface-2:    #25252f;
  --ink:          #f0ece2;
  --ink-soft:     #d6d2c6;
  --muted:        #9a958a;
  --muted-2:      #797469;
  --line:         #e6e0d2;
  --line-soft:    #2e2e38;
  --rule:         #34343f;
  --accent-red:   #e36054;
  --accent-red-d: #b54637;
  --accent-blue:  #6c97cc;
  --accent-green: #8caa6f;
  --accent-amber: #d4a946;
  --hl-pink:      #4a2a26;
  --hl-blue:      #243446;
  --hl-green:     #2c3a26;
  --hl-amber:     #3e3216;
  --tint-red:     #2a1d1c;
  --tint-blue:    #1a232e;
  --tint-green:   #1d2519;
  --tint-amber:   #2a2412;
  --shadow-card:  0 1px 0 rgba(0,0,0,.4), 0 6px 22px -10px rgba(0,0,0,.6);
  --shadow-rise:  0 1px 0 rgba(0,0,0,.5), 0 14px 40px -14px rgba(0,0,0,.7);

  /* Legacy aliases — pulled from the dark palette above */
  --parchment:   var(--paper);
  --parchment2:  var(--paper-2);
  --ink2:        var(--ink-soft);
  --gold:        var(--accent-red);
  --gold2:       #f4a097;
  --text-dark:   var(--ink);
  --bg:          var(--paper);
  --border:      var(--rule);
  --accent:      var(--accent-red);
  --accent2:     var(--accent-blue);
  --accent-bg:   var(--paper-2);
  --text:        var(--ink);
  --tag:         var(--paper-2);
  --danger:      var(--accent-red-d);
  --success:     var(--accent-green);
}
html.dark body,
:root[data-theme="dark"] body{background:var(--bg);color:var(--text)}
html{color-scheme:light dark}

/* ── Dark mode toggle button (shared across all pages) ── */
.dark-toggle,
#dark-toggle{
  background:transparent;
  border:1px solid var(--rule);
  border-radius:var(--r-2);
  color:var(--ink-soft);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.3rem .65rem;
  font-size:.78rem;
  font-family:inherit;
  letter-spacing:.04em;
  transition:background .15s, border-color .15s, color .15s;
  white-space:nowrap;
  flex-shrink:0;
}
.dark-toggle:hover,
#dark-toggle:hover{
  background:var(--paper-2);
  border-color:var(--ink-soft);
  color:var(--ink);
}
.dark-toggle .toggle-icon{font-size:.95rem;line-height:1}