/* Color scheme overrides — applied via a body class set from the Theme
   Options page (see inc/theme-options.php). Both schemes re-declare the
   same custom-property names from tokens.css; nothing else needs to know
   which scheme is active. */

/*
 * Each block redeclares both the raw --color-* tokens AND the semantic
 * aliases that most of the CSS actually consumes (--surface-page,
 * --text-body, etc.). The aliases can't just be left to inherit from
 * tokens.css's :root block: a custom property's value is resolved to its
 * used value at the element that declares it, so --surface-page: var(
 * --color-parchment) on :root bakes in :root's own --color-parchment
 * permanently — redeclaring --color-parchment lower down in the tree
 * never flows back into that already-resolved --surface-page. Both
 * layers have to move together per scheme.
 */
body.scheme-literary {
  --color-ink: #211D1A;
  --color-parchment: #FAF6EF;
  --color-parchment-dim: #F1EADC;
  --color-plum-deep: #2E1F2E;
  --color-plum-deep-text: #F1EADC;
  --color-accent: #B5502F;
  --color-accent-soft: #E7C9A9;
  --color-accent-2: #B5502F;
  --color-accent-3: #E7C9A9;
  --color-line: #DED4C2;

  --surface-page: var(--color-parchment);
  --surface-alt: var(--color-parchment-dim);
  --surface-inverse: var(--color-plum-deep);
  --text-body: var(--color-ink);
  --text-inverse: var(--color-plum-deep-text);
  --text-link: var(--color-accent);
  --border-subtle: var(--color-line);
}

/* Lotus/mandala motif behind blockquotes (see base.css's
   .entry-content blockquote::before) — Indian-inspired linework,
   colored per scheme since it's baked into the SVG's own stroke. */
body.scheme-literary .entry-content blockquote::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23B5502F' stroke-width='2'%3E%3Ccircle cx='50' cy='50' r='7'/%3E%3Cg%3E%3Cellipse cx='50' cy='27' rx='7' ry='17'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='17' transform='rotate(45 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='17' transform='rotate(90 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='17' transform='rotate(135 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='17' transform='rotate(180 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='17' transform='rotate(225 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='17' transform='rotate(270 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='17' transform='rotate(315 50 50)'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='38' stroke-width='1' opacity='0.5'/%3E%3C/svg%3E");
}

body.scheme-vibrant {
  --color-ink: #3B1E6B;
  --color-parchment: #FFF8F0;
  --color-parchment-dim: #FCEEDD;
  --color-plum-deep: #5A2D8C;
  --color-plum-deep-text: #FCEEDD;
  --color-accent: #E1637E;
  --color-accent-soft: #FCE29A;
  --color-accent-2: #2AA9A2;
  --color-accent-3: #F4A97F;
  --color-line: #EAD9D0;

  --surface-page: var(--color-parchment);
  --surface-alt: var(--color-parchment-dim);
  --surface-inverse: var(--color-plum-deep);
  --text-body: var(--color-ink);
  --text-inverse: var(--color-plum-deep-text);
  --text-link: var(--color-accent);
  --border-subtle: var(--color-line);
}

/* Turquoise for the vibrant scheme's motif — a further, more visible
   use of the requested turquoise accent. */
body.scheme-vibrant .entry-content blockquote::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%232AA9A2' stroke-width='2'%3E%3Ccircle cx='50' cy='50' r='7'/%3E%3Cg%3E%3Cellipse cx='50' cy='27' rx='7' ry='17'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='17' transform='rotate(45 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='17' transform='rotate(90 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='17' transform='rotate(135 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='17' transform='rotate(180 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='17' transform='rotate(225 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='17' transform='rotate(270 50 50)'/%3E%3Cellipse cx='50' cy='27' rx='7' ry='17' transform='rotate(315 50 50)'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='38' stroke-width='1' opacity='0.5'/%3E%3C/svg%3E");
}