/* ============================================================================
   tokens.css — Banoraeth theme
   Same structure as the house tokens-starter.css; values tuned to Dimraeth's art:
   parchment #F0EDD1, torch orange, dark timber, banner red, moss green.
   Dark ("torchlit") and light ("parchment") are both calibrated, not inverted.
   ========================================================================== */

@font-face {
  font-family: "Cinzel";
  src: url("/fonts/cinzel-latin-600-normal.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel";
  src: url("/fonts/cinzel-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* --- Accent ramp: torch fire ------------------------------------------- */
  --accent-50:  #fdf6e9;
  --accent-100: #fae8c6;
  --accent-200: #f5d08d;
  --accent-300: #f2b85f;
  --accent-400: #f2a541;
  --accent-500: #e8892b;
  --accent-600: #c96a1c;
  --accent-700: #a65218;
  --accent-800: #85411a;
  --accent-900: #6c3719;
  --accent-950: #3d1b0a;

  --accent:          var(--accent-700);
  --accent-hover:    var(--accent-800);
  --accent-active:   var(--accent-900);
  --accent-link:     var(--accent-700);
  --accent-tint:     color-mix(in oklch, var(--accent-400) 18%, transparent);
  --accent-ring:     color-mix(in oklch, var(--accent-500) 55%, transparent);

  /* --- Neutrals (light = parchment) -------------------------------------- */
  --canvas:        oklch(94.5% 0.028 92);
  --surface:       oklch(98% 0.014 92);
  --surface-2:     oklch(92% 0.03 88);
  --sidebar:       oklch(93% 0.03 90);
  --border:        oklch(84% 0.035 80);
  --border-strong: oklch(74% 0.04 75);
  --text:          oklch(24% 0.035 50);
  --text-body:     oklch(32% 0.03 55);
  --text-muted:    oklch(48% 0.03 60);
  --text-faint:    oklch(64% 0.03 70);
  --text-on-accent: #ffffff;

  --btn-primary-bg:       oklch(28% 0.04 45);
  --btn-primary-bg-hover: oklch(34% 0.045 45);
  --btn-primary-fg:       #F0EDD1;
  --btn-secondary-bg:     oklch(91% 0.03 85);
  --btn-secondary-bg-hover: oklch(87% 0.035 82);
  --btn-secondary-fg:     var(--text);
  --btn-ghost-bg-hover:   oklch(30% 0.04 50 / 0.08);

  /* --- Semantic, drawn from the game's palette --------------------------- */
  --success: #6f9a4a;  --success-tint: rgba(111, 154, 74, 0.16);  --success-text: #3f6a25;
  --warning: #d9902a;  --warning-tint: rgba(217, 144, 42, 0.16);  --warning-text: #8a5210;
  --danger:  #b83a32;  --danger-tint:  rgba(184, 58, 50, 0.12);   --danger-text:  #9a2d26;
  --info:    #4f8a8b;  --info-tint:    rgba(79, 138, 139, 0.14);  --info-text:    #2f6667;

  --shadow-sm: 0 1px 3px rgba(74, 52, 39, 0.10);
  --shadow-md: 0 8px 24px rgba(74, 52, 39, 0.10);
  --shadow-lg: 0 20px 40px -15px rgba(43, 29, 22, 0.20);
  --shadow-overlay: 0 20px 25px -5px rgba(43, 29, 22, 0.18), 0 8px 10px -6px rgba(43, 29, 22, 0.12);
  --scrim: rgba(23, 17, 13, 0.5);

  /* --- Spacing: 4/8 grid ---------------------------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px;
  --s-24: 96px; --s-32: 128px; --s-48: 192px;

  /* --- Radius: tighter than the house set, to sit with pixel art --------- */
  --r-control: 4px;
  --r-card:    6px;
  --r-modal:   8px;
  --r-pill:    9999px;

  /* --- Type: Cinzel for names and headings, a plain sans for everything else */
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px;
  --fs-18: 18px; --fs-20: 20px; --fs-24: 24px;
  --lh-tight: 1.1; --lh-snug: 1.25; --lh-body: 1.5;

  --control-h: 36px;
  --control-h-touch: 44px;
  --focus-ring: 0 0 0 2px var(--canvas), 0 0 0 4px var(--accent-ring);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --d-micro: 150ms; --d-reveal: 200ms; --d-overlay: 250ms;

  --z-sticky: 40; --z-modal: 60; --z-toast: 70;
}

/* Dark: torchlit timber. Surfaces lighten as they rise; parchment text. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --canvas:        oklch(16% 0.014 55);
    --surface:       oklch(21% 0.018 55);
    --surface-2:     oklch(26% 0.022 55);
    --sidebar:       oklch(14% 0.014 55);
    --border:        rgba(240, 237, 209, 0.11);
    --border-strong: rgba(240, 237, 209, 0.20);
    --text:          #F0EDD1;
    --text-body:     oklch(86% 0.025 92);
    --text-muted:    oklch(68% 0.025 85);
    --text-faint:    oklch(52% 0.022 75);

    --accent:        var(--accent-400);
    --accent-hover:  var(--accent-300);
    --accent-active: var(--accent-500);
    --accent-link:   var(--accent-300);
    --accent-tint:   color-mix(in oklch, var(--accent-400) 16%, transparent);

    --btn-primary-bg:         #F0EDD1;
    --btn-primary-bg-hover:   #fbf8e6;
    --btn-primary-fg:         oklch(18% 0.02 50);
    --btn-secondary-bg:       rgba(240, 237, 209, 0.07);
    --btn-secondary-bg-hover: rgba(240, 237, 209, 0.12);
    --btn-secondary-fg:       var(--text);
    --btn-ghost-bg-hover:     rgba(240, 237, 209, 0.08);

    --success: #9cc46f; --warning: #f2b85f; --danger: #e06a5f; --info: #7fb5b6;
    --success-text: #b5d690; --warning-text: #f5c97f; --danger-text: #f0948b; --info-text: #a3cfd0;
    --success-tint: rgba(156, 196, 111, 0.13); --warning-tint: rgba(242, 184, 95, 0.13);
    --danger-tint: rgba(224, 106, 95, 0.13); --info-tint: rgba(127, 181, 182, 0.13);

    --shadow-sm: none; --shadow-md: none; --shadow-lg: none;
    --shadow-overlay: 0 12px 32px rgba(0, 0, 0, 0.55);
    --scrim: rgba(8, 6, 4, 0.65);
  }
}

/* ============================================================================
   Base rules (from the house starter)
   ========================================================================== */
html { font-family: var(--font-sans); font-size: 14px; line-height: var(--lh-body); }
body { margin: 0; background: var(--canvas); color: var(--text-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { color: var(--text); line-height: var(--lh-snug); margin: 0; }
.meta { font-size: var(--fs-12); color: var(--text-muted); }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-card); padding: var(--s-5); box-shadow: var(--shadow-sm); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: var(--r-pill); font-size: var(--fs-12); font-weight: 500; background: var(--accent-tint); color: var(--accent-link); }
.chip.ok { background: var(--success-tint); color: var(--success-text); }
.chip.warn { background: var(--warning-tint); color: var(--warning-text); }
.chip.bad { background: var(--danger-tint); color: var(--danger-text); }

.btn { height: var(--control-h); padding: 0 var(--s-4); border-radius: var(--r-control); font-weight: 500; font-size: var(--fs-14); border: 1px solid transparent; cursor: pointer; transition: background var(--d-micro) var(--ease-out), transform var(--d-micro) var(--ease-out), box-shadow var(--d-micro) var(--ease-out); }
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; filter: saturate(0); cursor: not-allowed; transform: none; }
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn-primary:hover { background: var(--btn-primary-bg-hover); }
.btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-fg); border-color: var(--border); }
.btn-secondary:hover { background: var(--btn-secondary-bg-hover); }
.btn-ghost { background: transparent; color: var(--text-body); }
.btn-ghost:hover { background: var(--btn-ghost-bg-hover); }
.btn-danger { background: var(--danger); color: #fff; }

.input { height: var(--control-h); padding: 0 var(--s-3); border: 1px solid var(--border-strong); border-radius: var(--r-control); background: var(--surface); color: var(--text); font: inherit; }
.input::placeholder { color: var(--text-faint); }
.input:focus-visible { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media (pointer: coarse) {
  :root { --control-h: var(--control-h-touch); }
}