/* ===================================================================
   EMBERS — Cozy-fantasy virtual tabletop
   Design system: parchment · ink · leather · candlelight
   =================================================================== */

:root {
  /* Surfaces */
  --parchment:        #e9dcbf;
  --parchment-light:  #f3ead2;
  --parchment-dark:   #d6c39b;
  --parchment-edge:   #c2aa7a;

  /* Ink */
  --ink:        #2a2017;
  --ink-soft:   #4f4031;
  --ink-faint:  #7a6a54;

  /* Leather (frames & rails) */
  --leather:        #3b2618;
  --leather-light:  #5a3a23;
  --leather-dark:   #2a1a10;
  --leather-stitch: #b89364;

  /* Candlelight */
  --gold:        #c1933f;
  --gold-bright: #e8c372;
  --gold-deep:   #9a6f28;

  /* Accents */
  --wine:    #7d2330;
  --wine-br: #a23644;
  --forest:  #3f5d42;
  --arcane:  #5b4b8a;
  --fog:     #14100a;

  /* Roles (overridable per theme) */
  --bg:        var(--leather-dark);
  --surface:   var(--parchment);
  --surface-2: var(--parchment-light);
  --text:      var(--ink);
  --text-soft: var(--ink-soft);
  --accent:    var(--gold);
  --accent-2:  var(--wine);
  --rail:      var(--leather);

  --font-display: 'Cinzel', 'Trajan Pro', Georgia, serif;
  --font-body:    'EB Garamond', Georgia, serif;
  --font-hand:    'Caveat', 'Segoe Script', cursive;

  --radius: 7px;
  --shadow-deep: 0 18px 50px rgba(0,0,0,.55);
  --table-bg: #161009;
}

/* ---- Theme: SKY (fantasy sky blue) — DEFAULT ---- */
[data-theme="sky"] {
  --parchment:       #e7eff8;
  --parchment-light: #f5fafe;
  --parchment-dark:  #cfe0f1;
  --parchment-edge:  #a6c6e6;
  --ink:       #16293f;
  --ink-soft:  #34506c;
  --ink-faint: #4f6f8f;
  --leather:        #21436b;
  --leather-light:  #356296;
  --leather-dark:   #142b49;
  --leather-stitch: #88b3de;
  --gold:        #e3b755;
  --gold-bright: #f7df93;
  --gold-deep:   #ab7d22;
  --wine:        #c25664;
  --wine-br:     #dd7886;
  --forest:      #2f8478;
  --arcane:      #5b7fd0;
  --fog:         #0d2438;
  --bg:          #0f2338;
  --table-bg:    #16314f;
}
[data-theme="sky"] body {
  background-color: #0f2338;
  background-image:
    radial-gradient(150% 90% at 50% -15%, rgba(150,196,242,.28), transparent 60%),
    radial-gradient(circle at 18% 12%, rgba(255,255,255,.14), transparent 46%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 6px);
}

/* ---- Theme: ARCANE (mystical) ---- */
[data-theme="arcane"] {
  --parchment:       #efe9f7;
  --parchment-light: #f7f3fc;
  --parchment-dark:  #d8cdec;
  --parchment-edge:  #b9a9dc;
  --ink:       #221a33;
  --ink-soft:  #463a63;
  --leather:        #241a3a;
  --leather-light:  #3b2d5c;
  --leather-dark:   #150f24;
  --leather-stitch: #8a76c8;
  --gold:      #c9a8ff;
  --gold-bright: #e3d2ff;
  --wine:      #6e3aa8;
  --accent:    #b48bff;
  --accent-2:  #d062a8;
  --bg: var(--leather-dark);
  --table-bg: #181030;
}

/* ---- Theme: EMBER (warm dark tavern) ---- */
[data-theme="ember"] {
  --parchment:       #2a211a;
  --parchment-light: #352a20;
  --parchment-dark:  #211a14;
  --parchment-edge:  #4a3826;
  --ink:       #f0e2c8;
  --ink-soft:  #c9b48f;
  --ink-faint: #97825f;
  --leather:        #1a120c;
  --leather-light:  #2d2015;
  --leather-dark:   #100a06;
  --leather-stitch: #6b4d2c;
  --bg: #0c0805;
  --table-bg: #0c0805;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Subtle leather grain on the app shell */
body {
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(193,147,63,.10), transparent 60%),
    repeating-linear-gradient(135deg, rgba(0,0,0,.10) 0 2px, transparent 2px 5px),
    radial-gradient(circle at 30% 20%, rgba(0,0,0,.4), transparent 55%);
}

button { font-family: var(--font-body); cursor: pointer; }
::selection { background: rgba(193,147,63,.35); }

/* -------------------------------------------------------------- */
/*  Reusable texture / surface helpers                            */
/* -------------------------------------------------------------- */
.parchment {
  background-color: var(--surface);
  background-image:
    radial-gradient(120% 120% at 20% 10%, rgba(255,255,255,.35), transparent 55%),
    radial-gradient(100% 100% at 85% 90%, rgba(120,84,40,.18), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

.leather {
  background-color: var(--rail);
  background-image:
    radial-gradient(140% 120% at 50% 0%, rgba(255,255,255,.05), transparent 55%),
    repeating-linear-gradient(120deg, rgba(0,0,0,.18) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(40deg, rgba(0,0,0,.10) 0 4px, transparent 4px 9px);
}

/* Stitched border used on leather panels */
.stitched {
  position: relative;
  border: 1px solid var(--leather-dark);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4);
}
.stitched::after {
  content: "";
  position: absolute; inset: 5px;
  border: 1.5px dashed var(--leather-stitch);
  border-radius: 4px;
  opacity: .55;
  pointer-events: none;
}

/* Heading style */
.display {
  font-family: var(--font-display);
  letter-spacing: .04em;
  font-weight: 700;
}

/* Candle-glow gold button */
.btn {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #2a1c08;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep));
  border: 1px solid var(--gold-deep);
  border-radius: var(--radius);
  padding: 9px 16px;
  box-shadow: 0 2px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .08s ease, box-shadow .15s ease, filter .15s;
}
.btn:hover { filter: brightness(1.07); box-shadow: 0 0 16px rgba(232,195,114,.45), 0 2px 0 rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.5); }
.btn:active { transform: translateY(1px); }
.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--parchment-edge);
  box-shadow: none;
  text-transform: none;
  font-family: var(--font-body);
  letter-spacing: .01em;
  font-size: 14px;
}
.btn.ghost:hover { background: rgba(0,0,0,.05); box-shadow: none; filter: none; }
.btn.wine {
  color: #f6e9d0;
  background: linear-gradient(180deg, var(--wine-br), var(--wine) 60%, #5c1822);
  border-color: #4a131c;
}

/* Eyebrow / small-caps label — ink-based so it stays legible on light
   surfaces; gold only on dark leather panels where it has the contrast. */
.eyebrow {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 600;
}
.tray .eyebrow, .party-panel .eyebrow, .topbar .eyebrow, .pc-card .eyebrow,
.roll-result .eyebrow { color: var(--gold-bright); }

/* Keyboard focus ring for every interactive control */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--gold-bright);
  outline-offset: 2px;
  border-radius: 4px;
}
.btn:focus-visible, .init-roll-btn:focus-visible, .die-btn:focus-visible {
  outline-offset: 3px;
}
::placeholder { color: var(--ink-faint); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* Scrollbars */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--leather-light); border-radius: 9px; border: 2px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* Wax-seal motif */
.seal {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--wine-br), var(--wine) 60%, #4e131c);
  color: #f3d9b0; font-family: var(--font-display); font-size: 14px;
  box-shadow: inset 0 2px 4px rgba(255,255,255,.25), inset 0 -3px 6px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.4);
}

.hairline { height: 1px; background: linear-gradient(90deg, transparent, var(--parchment-edge), transparent); border: 0; margin: 10px 0; }
[data-theme="ember"] .hairline { background: linear-gradient(90deg, transparent, var(--leather-light), transparent); }