/*
  Tortured Souls -- a dark, spooky skin for Mastodon 4.7's default theme.

  Works by overriding the theme's own CSS variables rather than patching
  selectors, so it survives Mastodon upgrades far better than selector
  overrides would. Palette: void-black with a violet/wine tint, bone-white
  text, pale spectral-violet links, wine-red buttons, blood-red fog.
  Contrast checked (WCAG): body/secondary/tertiary text, links and button
  labels all >= 5.5:1; only disabled text is lower, which WCAG exempts.

  The site's CSP allows styles/fonts/images from this origin (plus data:
  images) only, so: no web fonts, no remote images -- system serif for
  headings, CSS gradients for atmosphere.
*/

/* ---- 1. Palette: replace the grey and indigo scales ------------------- */
html {
  /* warm, purple-tinted void instead of the default cool grey */
  --color-grey-50:  #f4efe6;
  --color-grey-100: #e8e0d2; /* bone -- primary text */
  --color-grey-200: #d3c8b8;
  --color-grey-300: #b5a898; /* secondary text */
  --color-grey-400: #968878; /* tertiary text */
  --color-grey-500: #6f6258;
  --color-grey-600: #54484d;
  --color-grey-700: #3a2a33;
  --color-grey-800: #261820; /* borders, tertiary surfaces */
  --color-grey-900: #160d14; /* secondary surfaces (cards, columns) */
  --color-grey-950: #0a0609; /* page background -- the void */

  /* indigo -> spectral violet; this is the "brand" colour (links, buttons) */
  --color-indigo-50:  #f3edff;
  --color-indigo-100: #e6dbff;
  --color-indigo-200: #d3bfff;
  --color-indigo-300: #c4a8ff; /* brand text/links on dark */
  --color-indigo-400: #a982f5;
  --color-indigo-500: #8d5fe6;
  --color-indigo-600: #7a47d1;
  --color-indigo-700: #6a38b8; /* brand buttons */
  --color-indigo-800: #552d95;
  --color-indigo-900: #35205f;
  --color-indigo-950: #1c1236;
}

/* ---- 2. Force the dark mapping for every visitor ----------------------
   The default theme picks light or dark from the visitor's OS setting, so
   without this a light-mode visitor would get a bone-white site. These are
   the dark scheme's own semantic mappings, re-asserted for both schemes
   (specificity beats the theme's single-attribute selectors). */
html,
html[data-color-scheme="light"],
html[data-color-scheme="dark"] {
  color-scheme: dark;

  --color-text-primary: var(--color-grey-100);
  --color-text-secondary: var(--color-grey-300);
  --color-text-tertiary: var(--color-grey-400);
  --color-text-inverted: var(--color-grey-950);
  --color-text-brand: #d6b4ff; /* pale spectral violet links */
  --color-text-brand-soft: color-mix(in oklab, var(--color-text-primary), var(--color-text-brand));
  --color-text-on-brand-base: var(--color-white);
  --color-text-brand-on-inverted: var(--color-indigo-600);
  --color-text-error: var(--color-red-300);
  --color-text-on-error-base: var(--color-white);
  --color-text-warning: var(--color-yellow-400);
  --color-text-on-warning-base: var(--color-white);
  --color-text-success: var(--color-green-400);
  --color-text-on-success-base: var(--color-white);
  --color-text-disabled: var(--color-grey-600);
  --color-text-on-disabled: var(--color-grey-400);
  --color-text-on-media: var(--color-white);
  --color-text-status-links: color-mix(in oklab, var(--color-text-primary), var(--color-text-secondary));

  --color-bg-primary: var(--color-grey-950);
  --color-bg-secondary: var(--color-grey-900);
  --color-bg-tertiary: var(--color-grey-800);
  --color-bg-blend: rgb(from var(--color-black) r g b/30%);
  --color-bg-highlight: rgb(from var(--color-text-primary) r g b/5%);
  --color-bg-inverted: var(--color-grey-50);
  --color-bg-overlay-highlight: var(--color-bg-highlight);
  --color-bg-overlay: var(--color-black);
  --color-bg-media-base: var(--color-black);
  --color-bg-media: rgb(from var(--color-bg-media-base) r g b/65%);
  --color-bg-disabled: var(--color-grey-700);
  --color-bg-brand-base: #8f1533; /* wine-red primary buttons */
  --color-bg-brand-base-hover: #6e0f27;
  --color-bg-brand-soft: var(--color-indigo-900);
  --color-bg-brand-softest: var(--color-indigo-950);
  --color-bg-error-base: var(--color-red-700);
  --color-bg-error-base-hover: var(--color-red-800);
  --color-bg-error-soft: var(--color-red-900);
  --color-bg-error-softest: var(--color-red-950);
  --color-bg-warning-base: var(--color-yellow-700);
  --color-bg-warning-soft: var(--color-yellow-900);
  --color-bg-warning-softest: var(--color-yellow-950);
  --color-bg-success-base: var(--color-green-600);
  --color-bg-success-soft: var(--color-green-900);
  --color-bg-success-softest: var(--color-green-950);

  --color-border-primary: var(--color-grey-800);
  --color-border-strong: var(--color-grey-100);
  --color-border-brand: var(--color-text-brand);
  --color-border-brand-soft: var(--color-indigo-800);
  --color-border-error: var(--color-red-300);
  --color-border-media: #fcf8ff26;
  --color-border-error-soft: rgb(from var(--color-border-error) r g b/50%);
  --color-border-warning-soft: rgb(from var(--color-text-warning) r g b/50%);
  --color-border-success-soft: var(--color-green-800);

  --shadow-strength-primary: 80%;
  --color-shadow-primary: rgb(from var(--color-black) r g b/var(--shadow-strength-primary));
  --dropdown-shadow: 0 20px 25px -5px var(--color-shadow-primary), 0 8px 10px -6px var(--color-shadow-primary);
  --overlay-icon-shadow: drop-shadow(0 0 8px var(--color-shadow-primary));

  /* ---- 3. Signature touches (these are the "spooky") ---------------- */
  --font-heading: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;

  /* wine-red instead of the stock brand-tinted rich-text callouts */
  --rich-text-container-color: #3b0d1b;
  --rich-text-text-color: #ff9fb0;
  --rich-text-decorations-color: #7a2238;

  /* favourites glow candle-amber, bookmarks blood-red */
  --color-text-favourite-highlight: #ffb347;
  --color-text-bookmark-highlight: #ff5468;
}

/* ---- 4. Atmosphere: a bruised, foggy backdrop behind everything ------- */
body {
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, rgba(150, 20, 52, 0.55), transparent 70%),
    radial-gradient(ellipse 75% 55% at 4% 110%, rgba(78, 30, 130, 0.42), transparent 65%),
    radial-gradient(ellipse 65% 50% at 100% 100%, rgba(120, 12, 40, 0.38), transparent 60%),
    var(--color-bg-primary);
  background-attachment: fixed;
}

/* --font-heading above is barely referenced by 4.7's markup (measured: no
   element on the profile page used it), so headings need real selectors. */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.03em;
}

::selection {
  background: #8a1230;
  color: #fff;
}

/* a faint violet glow when you reach for a link -- not on every element */
a:hover {
  text-shadow: 0 0 10px rgba(196, 168, 255, 0.45);
}

* {
  scrollbar-color: #3a2230 #0a0609;
}