/* deep-ink.css — the Deep Ink theme (the default; Settings > Appearance can
   switch to Living Memory). The inline bootstrap in index.html sets
   html[data-sv-theme] before first paint; home.logic.js flips it live.

   Look: near-absolute black with soft specular reflections, lacquered black
   panels (a reflection horizon across the top, a bright top edge, deep
   shadow), black enamel primary buttons with polished-gold rims and lettering,
   a chrome headline, cool ivory text and one polished-gold accent.

   1. Tokens: every --sv-* colour, including the rgb triplets the views use as
      rgba(var(--sv-…-rgb), alpha). This alone retints the whole UI V2 surface.
   2. The legacy app palette (styles.css) for the older panels and modals.
   3. Gloss: the few Deep Ink-only surface treatments tokens cannot express. */

/* ---- 1. tokens ---- */
html[data-sv-theme="ink"] {
  --sv-bg: #010101;
  --sv-violet-ground: #0b0b0c;
  --sv-panel: rgba(6,6,7,.9);
  --sv-panel-strong: rgba(4,4,5,.96);
  --sv-panel-soft: rgba(10,10,11,.78);
  --sv-line: rgba(255,255,255,.09);
  --sv-line-soft: rgba(255,255,255,.06);
  --sv-line-2: rgba(255,255,255,.12);
  --sv-line-strong: rgba(255,255,255,.2);
  --sv-line-hover: rgba(236,208,150,.75);
  --sv-fill-hover: rgba(255,255,255,.05);
  --sv-violet: #d4b074;
  --sv-violet-bright: #f1d9a6;
  --sv-violet-deep: #7a5a2c;
  --sv-text: #f3f0ea;
  --sv-text-soft: #dcd8d0;
  --sv-text-muted: #a9a59e;
  --sv-text-dim: #6e6b66;
  --sv-placeholder: #5c5955;
  --sv-plum-solid: #0c0c0d;
  --sv-accent-rgb: 175,175,180;   /* violet layers become neutral grey hairlines/fills */
  --sv-glow-rgb: 226,193,132;     /* highlights become polished gold */
  --sv-deep-rgb: 122,90,44;
  --sv-plum-rgb: 12,12,13;
  --sv-ground-rgb: 0,0,0;
  --sv-night-rgb: 5,5,6;
  --sv-night2-rgb: 4,4,5;
  --sv-on-primary: #f1d9a6;
  --sv-tint-lav: #9d9991; --sv-tint-lav2: #b1ada5; --sv-tint-lav3: #a9a59e; --sv-tint-lav4: #d6d2ca;
  --sv-tint-lav5: #dcd8d0; --sv-tint-lav6: #e6e2da; --sv-tint-violet: #d4b074; --sv-tint-slate: #3a3936;
  --sv-tint-night: #050506; --sv-tint-night2: #030304; --sv-tint-plum: #0d0d0e; --sv-tint-plum2: #0c0c0d;
  --sv-tint-plum3: #0a0a0b; --sv-tint-plum4: #09090a;
  --sv-tint-royal-rgb: 70,70,74; --sv-tint-abyss-rgb: 2,2,2; --sv-tint-indigo-rgb: 40,40,44;
  --sv-tint-abyss2-rgb: 1,1,1; --sv-tint-dusk-rgb: 8,8,9;
  --ink-enamel: linear-gradient(180deg, #38383c 0%, #161618 46%, #020202 52%, #0d0d0e 100%);
  --sv-grad-primary: var(--ink-enamel);
  --sv-grad-badge: linear-gradient(180deg, #f1d9a6, #b08a4e);
  --sv-grad-sheen: linear-gradient(180deg, #ffffff 0%, #e9e6e0 44%, #8d8a85 50%, #d9d5cd 58%, #fbf8f2 100%);
  --sv-card-inset: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(255,255,255,.03);
  --ink-gold-rim: rgba(226,193,132,.75);
  --ink-gloss-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.8), 0 14px 30px -14px #000;
  --sv-glow-primary: var(--ink-gloss-shadow);
  --sv-glow-focus: 0 0 0 3px rgba(236,208,150,.3);
  --sv-shadow-pop: 0 30px 70px -24px #000;
  /* lacquered card: a glassy reflection on the top ~40%, then pure black */
  --ink-card: linear-gradient(180deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.028) 38%, rgba(255,255,255,0) 40.5%), linear-gradient(180deg, #080809, #010101);
  --ink-inset: inset 0 1px 0 rgba(255,255,255,.2), inset 0 0 0 1px rgba(255,255,255,.025), 0 26px 50px -26px #000;
  color-scheme: dark;
}

/* ---- 2. legacy app palette (account, file, confirm, cost, settings panels…) ---- */
html[data-sv-theme="ink"][data-theme] {
  --bg: #010101;
  --panel: #070708;
  --panel-2: #0c0c0d;
  --panel-3: #121213;
  --story-bg: #000;
  --border: rgba(255,255,255,.1);
  --border-strong: rgba(255,255,255,.2);
  --text: #f3f0ea;
  --text-dim: #a9a59e;
  --text-faint: #6e6b66;
  --accent: #d4b074;
  --accent-hover: #f1d9a6;
}

/* ---- 3. gloss ---- */
/* specular reflections over the home ground, under the content (m-main is z-index 2) */
html[data-sv-theme="ink"] #sv-home [data-screen-label]::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(112deg, transparent 30%, rgba(255,255,255,.028) 41%, rgba(255,255,255,.008) 47%, transparent 56%),
    radial-gradient(ellipse 45% 22% at 22% 0%, rgba(255,255,255,.05), transparent 70%),
    radial-gradient(ellipse 70% 50% at 50% 110%, rgba(0,0,0,.9), transparent 70%);
}
/* starfields become faint grey dust; canvas dice go polished gold */
html[data-sv-theme="ink"] constellation-sky { filter: grayscale(1) brightness(.9); opacity: .28; }
html[data-sv-theme="ink"] #sv-home .hv1 { background: radial-gradient(circle at 50% 22%, #2c2c2f, #050505 62%) !important; border-color: rgba(255,255,255,.16) !important; animation: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 22px -12px #000 !important; }
html[data-sv-theme="ink"] #sv-home .hv1 canvas { filter: grayscale(1) sepia(.5) saturate(1.5) brightness(1.2); }
html[data-sv-theme="ink"] #sv-home .m-topbar { background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 60%), rgba(0,0,0,.86) !important; box-shadow: inset 0 -1px 0 rgba(255,255,255,.07); }
html[data-sv-theme="ink"] #sv-home .m-bottom { background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 50%), rgba(0,0,0,.94) !important; }

/* headlines: polished chrome with a hard reflection horizon instead of the moving sheen */
html[data-sv-theme="ink"] #sv-home [style*="linear-gradient(110deg,var(--sv-violet) 20%"] {
  background: var(--sv-grad-sheen) !important; background-size: 100% 100% !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  animation: none !important; filter: drop-shadow(0 2px 0 rgba(0,0,0,.9));
}

/* primary actions: black enamel with a polished-gold rim and lettering */
html[data-sv-theme="ink"] [style*="background:var(--sv-grad-primary)"],
html[data-sv-theme="ink"] .sv-btn--primary {
  border: 1px solid var(--ink-gold-rim) !important;
  box-shadow: var(--ink-gloss-shadow), 0 0 26px -14px rgba(226,193,132,.45) !important;
  text-shadow: 0 1px 0 #000;
}
html[data-sv-theme="ink"] #sv-home .hv6:hover, html[data-sv-theme="ink"] #sv-home .hv13:hover { color: #fff3d6 !important; border-color: #f1d9a6 !important; }
/* secondary outline buttons: a faint enamel sheen */
html[data-sv-theme="ink"] #sv-home .hv7, html[data-sv-theme="ink"] #sv-home .hv3 {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.01) 48%, rgba(0,0,0,0) 52%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1) !important;
}

/* cards, tiles and popovers: lacquer */
html[data-sv-theme="ink"] #sv-home [style*="linear-gradient(180deg,rgba(var(--sv-plum-rgb)"] { background: var(--ink-card) !important; }
html[data-sv-theme="ink"] #sv-home [style*="inset 0 0 0 4px var(--sv-bg)"] { box-shadow: var(--ink-inset) !important; }
html[data-sv-theme="ink"] #sv-home [style*="background:var(--sv-panel-soft)"] { background: var(--ink-card) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
html[data-sv-theme="ink"] #sv-home .sv-starter-card { box-shadow: var(--ink-inset); }
html[data-sv-theme="ink"] #sv-home .sv-starter-numeral { color: var(--sv-violet) !important; }
html[data-sv-theme="ink"] #sv-home .sv-card, html[data-sv-theme="ink"] .sv-card { background: var(--ink-card); box-shadow: var(--ink-inset); }
html[data-sv-theme="ink"] #sv-home [style*="background:rgba(var(--sv-night-rgb),.97)"],
html[data-sv-theme="ink"] #sv-home [style*="background:rgba(var(--sv-night2-rgb)"],
html[data-sv-theme="ink"] #sv-home [style*="background:rgba(var(--sv-plum-rgb),.9"] {
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0) 25%), rgba(3,3,3,.98) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 30px 60px -20px #000;
}
/* the selected adventure card: gold rim, soft gold bloom */
html[data-sv-theme="ink"] #sv-home [style*="border-color:rgba(var(--sv-glow-rgb),.85)"] {
  border-color: var(--ink-gold-rim) !important;
  box-shadow: var(--ink-inset), 0 0 0 1px rgba(0,0,0,.9), 0 0 38px -18px rgba(226,193,132,.35) !important;
}
/* constellation specks and the orbit core: white and gold, not graph colours */
html[data-sv-theme="ink"] #sv-home .m-home [style*="sv-home-twinkle"] { filter: grayscale(1) brightness(1.4); }
html[data-sv-theme="ink"] #sv-home .m-home [style*="background:#e8c84e"] { background: var(--sv-violet-bright) !important; box-shadow: 0 0 14px rgba(230,197,143,.45) !important; }
html[data-sv-theme="ink"] #sv-home [style*="radial-gradient(circle at"][style*="rgba(var(--sv-accent-rgb)"] { background: radial-gradient(ellipse 60% 35% at 70% 0%, rgba(255,255,255,.06), transparent 70%) !important; }

/* sign-in card */
html[data-sv-theme="ink"] .sva-card { background: var(--ink-card); box-shadow: var(--ink-inset), var(--sv-shadow-pop), 0 0 80px -40px rgba(226,193,132,.25); }
html[data-sv-theme="ink"] .sva-title { background: var(--sv-grad-sheen); background-size: 100% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: none; filter: drop-shadow(0 2px 0 rgba(0,0,0,.9)); }

/* adventure: Send is a primary action (enamel); the dice icon is canvas-drawn violet */
html[data-sv-theme="ink"] #app-view.sv-adventure #send-btn {
  background: var(--ink-enamel) !important; color: var(--sv-on-primary) !important;
  border-color: var(--ink-gold-rim) !important; box-shadow: var(--ink-gloss-shadow), 0 0 26px -14px rgba(226,193,132,.45) !important;
  text-shadow: 0 1px 0 #000;
}
html[data-sv-theme="ink"] #app-view.sv-adventure #roll-btn canvas,
html[data-sv-theme="ink"] #app-view.sv-adventure #roll-btn svg { filter: grayscale(1) sepia(.5) saturate(1.5) brightness(1.2); }
html[data-sv-theme="ink"] #app-view.sv-adventure .panel,
html[data-sv-theme="ink"] #app-view.sv-adventure .sv-panel { box-shadow: var(--ink-inset); }