/* davecooper.name skin: vedanta -- the devotional register's own
   dress (the user, 2026-10-06), offered on /dnd/ only (dnd.lisp
   `skins').  Every rule is scoped under :root[data-skin="vedanta"];
   the structure is css/style.css and what a skin may do is in
   source/skins.lisp.

   Two moods, following the reader's light/dark switch: day (palm-leaf
   cream, saffron, a dawn band across the top) and night (a deep
   maroon-brown, the saffron gone to gold).  Whatever differs between
   them is a custom property in the token blocks; the rest reads them.

   The decoration (still; nothing here moves): on the decor layer,
   1 a lotus in line, low in the right corner, drawn in the accent
   through a mask so the same drawing serves both moods; 2 a smaller
   lotus, fainter, low on the left; 3 the sun, a soft disc high on the
   left.  A floret sets off each section heading and the mantra box.
   The subtlety rule of the page carries over: nothing figurative of a
   deity, no symbols with a doctrinal claim, a lotus and the sun only. */

/* ---- tokens: day ---- */
:root[data-skin="vedanta"] {
  --bg: #f6ecd6;
  --bg-card: #fdf6e7;
  --ink: #3a2a1c;
  --ink-soft: #7a6248;
  --accent: #9a3b12;
  --accent-soft: #c2611c;
  --rule: #e2cfa6;
  --pill: #efdfbd;
  --pill-on: #7a1f12;
  --pill-on-ink: #fbe9c8;
  --gloss: #6e4a16;
  --warn: #9a1f1f;

  --vd-dawn: linear-gradient(180deg, #f3c58a 0, #f6dfb8 7rem, #f6ecd6 16rem);
  --vd-sun: radial-gradient(circle at 50% 50%, #f7b955 0 44%, rgba(247, 185, 85, .35) 52%, transparent 70%);
  --vd-sun-opacity: .55;
  --vd-lotus-opacity: .16;
  --vd-floret: #c2611c;
  --vd-frame: #d9b983;
}
/* ---- tokens: night ---- */
@media (prefers-color-scheme: dark) {
  :root[data-skin="vedanta"]:not([data-theme="light"]) {
    --bg: #1b1210;
    --bg-card: #27191a;
    --ink: #f1e5cf;
    --ink-soft: #b59a7c;
    --accent: #f2a93b;
    --accent-soft: #e3842c;
    --rule: #4a3426;
    --pill: #33241f;
    --pill-on: #f2a93b;
    --pill-on-ink: #1b1210;
    --gloss: #d9a85e;
    --warn: #e26b4f;

    --vd-dawn: linear-gradient(180deg, #3a1f14 0, #241613 8rem, #1b1210 18rem);
    --vd-sun: radial-gradient(circle at 50% 50%, #f6d08a 0 40%, rgba(246, 208, 138, .25) 50%, transparent 70%);
    --vd-sun-opacity: .35;
    --vd-lotus-opacity: .2;
    --vd-floret: #e3842c;
    --vd-frame: #6a4a2e;
  }
}
:root[data-skin="vedanta"][data-theme="dark"] {
  --bg: #1b1210;
  --bg-card: #27191a;
  --ink: #f1e5cf;
  --ink-soft: #b59a7c;
  --accent: #f2a93b;
  --accent-soft: #e3842c;
  --rule: #4a3426;
  --pill: #33241f;
  --pill-on: #f2a93b;
  --pill-on-ink: #1b1210;
  --gloss: #d9a85e;
  --warn: #e26b4f;

  --vd-dawn: linear-gradient(180deg, #3a1f14 0, #241613 8rem, #1b1210 18rem);
  --vd-sun: radial-gradient(circle at 50% 50%, #f6d08a 0 40%, rgba(246, 208, 138, .25) 50%, transparent 70%);
  --vd-sun-opacity: .35;
  --vd-lotus-opacity: .2;
  --vd-floret: #e3842c;
  --vd-frame: #6a4a2e;
}

/* ---- the dawn across the top ---- */
:root[data-skin="vedanta"] body {
  background-color: var(--bg);
  background-image: var(--vd-dawn);
  background-repeat: no-repeat;
}
:root[data-skin="vedanta"] ::selection { background: var(--accent-soft); color: #fff8e8; }

/* the page's parts above the decoration layer */
:root[data-skin="vedanta"] .dc-header,
:root[data-skin="vedanta"] .dc-main,
:root[data-skin="vedanta"] .dc-footer { position: relative; z-index: 1; }

/* ---- type and rules ---- */
:root[data-skin="vedanta"] .dc-header { border-bottom: 3px double var(--vd-frame); }
:root[data-skin="vedanta"] .dc-brand { letter-spacing: .02em; }
:root[data-skin="vedanta"] .dnd-deva { text-shadow: 0 1px 0 rgba(255, 255, 255, .25); }
:root[data-skin="vedanta"] .dnd-title { color: var(--accent-soft); }
/* a floret on either side of each section heading */
:root[data-skin="vedanta"] body.dnd .dc-main h2 { color: var(--accent-soft); letter-spacing: .14em; }
:root[data-skin="vedanta"] body.dnd .dc-main h2::before,
:root[data-skin="vedanta"] body.dnd .dc-main h2::after {
  content: "\2741";
  color: var(--vd-floret);
  font-size: .95em;
  margin: 0 .6em;
  position: relative;
  top: .05em;
}
:root[data-skin="vedanta"] a { text-decoration-color: var(--rule); text-underline-offset: .15em; }
:root[data-skin="vedanta"] a:hover { text-decoration-color: var(--accent-soft); }

/* the list of sites: a floret for a bullet */
:root[data-skin="vedanta"] .dc-sections li { position: relative; padding-left: 1.5rem; }
:root[data-skin="vedanta"] .dc-sections li::before {
  content: "\2741";
  position: absolute;
  left: 0;
  top: .05em;
  color: var(--vd-floret);
  font-size: .9em;
}

/* the FAQ's questions carry the accent */
:root[data-skin="vedanta"] .dnd-faq summary { color: var(--accent); }

/* ---- the mantra: a framed card, a floret above ---- */
:root[data-skin="vedanta"] .dnd-mantra {
  position: relative;
  border: 1px solid var(--vd-frame);
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 5px var(--vd-frame);
  padding-top: 1.6rem;
  margin-top: 3rem;
}
:root[data-skin="vedanta"] .dnd-mantra::before {
  content: "\2741";
  position: absolute;
  left: 50%;
  top: -.75em;
  transform: translateX(-50%);
  padding: 0 .5em;
  background: var(--bg-card);
  color: var(--vd-floret);
  font-size: 1.1rem;
  line-height: 1;
}

/* ---- the footer: a double rule, the odometer in brass ---- */
:root[data-skin="vedanta"] .dc-footer { border-top: 3px double var(--vd-frame); }
:root[data-skin="vedanta"] .dc-digit { background: var(--pill-on); color: var(--pill-on-ink); border-radius: .15rem; }

/* ---- the decoration layer ---- */
:root[data-skin="vedanta"] .dc-decor {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
:root[data-skin="vedanta"] .dc-decor i { position: absolute; display: block; }

/* 1 and 2: the lotus, drawn once and coloured by the accent through a
   mask (the SVG is the shape; the colour is the token's) */
:root[data-skin="vedanta"] .dc-decor i:nth-child(1),
:root[data-skin="vedanta"] .dc-decor i:nth-child(2) {
  bottom: 1.5rem;
  width: 18rem;
  height: 12.6rem;
  background-color: var(--accent);
  opacity: var(--vd-lotus-opacity);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M100 14C86 44 86 78 100 108C114 78 114 44 100 14Z'/%3E%3Cpath d='M100 108C72 94 58 70 64 40C84 54 96 80 100 108Z'/%3E%3Cpath d='M100 108C128 94 142 70 136 40C116 54 104 80 100 108Z'/%3E%3Cpath d='M100 108C64 104 36 88 24 60C56 62 86 82 100 108Z'/%3E%3Cpath d='M100 108C136 104 164 88 176 60C144 62 114 82 100 108Z'/%3E%3Cpath d='M30 120Q100 136 170 120M52 128Q100 140 148 128'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 140' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M100 14C86 44 86 78 100 108C114 78 114 44 100 14Z'/%3E%3Cpath d='M100 108C72 94 58 70 64 40C84 54 96 80 100 108Z'/%3E%3Cpath d='M100 108C128 94 142 70 136 40C116 54 104 80 100 108Z'/%3E%3Cpath d='M100 108C64 104 36 88 24 60C56 62 86 82 100 108Z'/%3E%3Cpath d='M100 108C136 104 164 88 176 60C144 62 114 82 100 108Z'/%3E%3Cpath d='M30 120Q100 136 170 120M52 128Q100 140 148 128'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root[data-skin="vedanta"] .dc-decor i:nth-child(1) { right: 2vw; }
:root[data-skin="vedanta"] .dc-decor i:nth-child(2) { left: 1vw; width: 11rem; height: 7.7rem; opacity: calc(var(--vd-lotus-opacity) * .6); }

/* 3: the sun, high on the left, behind the dawn */
:root[data-skin="vedanta"] .dc-decor i:nth-child(3) {
  left: 4vw;
  top: 3.5rem;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  background: var(--vd-sun);
  opacity: var(--vd-sun-opacity);
}

/* ---- narrow screens: the text has no margins to spare ---- */
@media (max-width: 900px) {
  :root[data-skin="vedanta"] .dc-decor i:nth-child(1) { width: 9rem; height: 6.3rem; bottom: .5rem; opacity: calc(var(--vd-lotus-opacity) * .7); }
  :root[data-skin="vedanta"] .dc-decor i:nth-child(2) { display: none; }
  :root[data-skin="vedanta"] .dc-decor i:nth-child(3) { width: 5rem; height: 5rem; left: auto; right: 5vw; top: 5rem; opacity: calc(var(--vd-sun-opacity) * .6); }
  :root[data-skin="vedanta"] body.dnd .dc-main h2::before,
  :root[data-skin="vedanta"] body.dnd .dc-main h2::after { margin: 0 .35em; }
}

@media print {
  :root[data-skin="vedanta"] body { background: #fff; }
  :root[data-skin="vedanta"] .dc-decor { display: none; }
}