/* Mastodon custom CSS: maps coryd.dev's @coryd/ui tokens onto Mastodon's color tokens.
 *
 * Mastodon keeps this in its database (Admin → Server settings → Appearance → Custom CSS), so
 * this file is the source of truth. Apply it with social-server/mastodon/README.md.
 *
 * Values are copied from @coryd/ui's tokens/vars.css and coryd.dev's base/vars.css (0.153.0).
 * Mastodon can't import the package, so keep them in step by hand when the palette changes. */

/* ── Primitives: coryd.dev raw scale ─────────────────────────────────────── */

:root {
  --coryd-gray-100: oklch(0.985 0.006 252);
  --coryd-gray-200: oklch(0.96 0.006 252);
  --coryd-gray-300: oklch(0.918 0.006 252);
  --coryd-gray-400: oklch(0.668 0.012 252);
  --coryd-gray-500: oklch(0.6 0.012 252);
  --coryd-gray-600: oklch(0.49 0.012 252);
  --coryd-gray-700: oklch(0.44 0.012 252);
  --coryd-gray-800: oklch(0.163 0.012 252);
  --coryd-gray-840: oklch(0.17 0.01 252);
  --coryd-gray-880: oklch(0.24 0.01 252);
  --coryd-gray-920: oklch(0.09 0.008 252);

  /* Dark-mode ink and inverse surface. Not --gray-200: thin text at L 0.96 on the 0.163
   * surface glares. */
  --coryd-text-dark: oklch(0.9 0.008 252);
  --coryd-surface-inverse-dark: oklch(0.88 0.008 252);

  /* --color-border: 3:1 against each mode's surface. */
  --coryd-border-light: var(--coryd-gray-500);
  --coryd-border-dark: oklch(0.5 0.012 252);

  /* --brand-coryd, one value per mode. The light red reaches only ~3.3:1 on the dark surface;
   * the dark value is lighter so selected states and the focus ring stay readable. */
  --coryd-brand-light: oklch(0.51 0.17 19);
  --coryd-brand-dark: oklch(0.68 0.18 20);

  /* Selection: the brand hue at a fixed lightness, under normal text (components/selection.css).
   * Inverse text on the 85% brand fill fails contrast. */
  --coryd-selection-light: oklch(0.78 0.12 19);
  --coryd-selection-dark: oklch(0.4 0.12 20);

  /* Gold stars, from --color-rating-fill. Dark mode only: a plain glyph needs its edge to
   * hold 3:1 on the light surface, and Mastodon's star has none. */
  --coryd-rating-fill: oklch(0.82 0.15 85);

  /* Semantic state: same lightness/chroma recipe, hues 22/88/148. */
  --coryd-error-light: oklch(0.44 0.14 22);
  --coryd-error-dark: oklch(0.75 0.11 22);
  --coryd-warning-light: oklch(0.48 0.12 88);
  --coryd-warning-dark: oklch(0.75 0.11 88);
  --coryd-success-light: oklch(0.44 0.12 148);
  --coryd-success-dark: oklch(0.75 0.11 148);

  /* Tint levels, from the package's --tint-* scale. */
  --coryd-tint-subtle: 4%;
  --coryd-tint-hover: 8%;
  --coryd-tint-active: 12%;
}

/* ── Light ──────────────────────────────────────────────────────────────── */

:root[data-color-scheme='light']:not([data-contrast='high']) {
  --coryd-brand: var(--coryd-brand-light);
  --coryd-selection: var(--coryd-selection-light);

  /* Text. brand == primary: links carry no color, only an underline. */
  --color-text-primary: var(--coryd-gray-800);
  --color-text-secondary: var(--coryd-gray-600);
  --color-text-tertiary: var(--coryd-gray-500);
  --color-text-inverted: var(--coryd-gray-200);
  --color-text-brand: var(--coryd-gray-800);
  --color-text-brand-soft: var(--coryd-gray-600);
  --color-text-on-brand-base: var(--coryd-gray-200);
  --color-text-brand-on-inverted: var(--coryd-gray-200);
  --color-text-status-links: var(--coryd-gray-800);
  --color-text-error: var(--coryd-error-light);
  --color-text-on-error-base: var(--coryd-gray-100);
  --color-text-warning: var(--coryd-warning-light);
  --color-text-on-warning-base: var(--coryd-gray-100);
  --color-text-success: var(--coryd-success-light);
  --color-text-on-success-base: var(--coryd-gray-100);
  --color-text-disabled: var(--coryd-gray-400);
  --color-text-on-disabled: var(--coryd-gray-600);
  --color-text-on-media: var(--coryd-gray-100);

  /* Selected-state icons: the one place brand red earns a solid color. */
  --color-text-bookmark-highlight: var(--coryd-brand);
  --color-text-favourite-highlight: var(--coryd-warning-light);

  /* Backgrounds, neutral. primary = --color-surface, secondary = --color-bg,
   * tertiary = --color-surface-alt. */
  --color-bg-primary: var(--coryd-gray-200);
  --color-bg-secondary: var(--coryd-gray-100);
  --color-bg-tertiary: var(--coryd-gray-300);

  /* Backgrounds, utility */
  --color-bg-inverted: var(--coryd-gray-800);
  --color-bg-overlay-base: oklch(0.163 0.012 252 / 75%);
  --color-bg-overlay-highlight: oklch(0.163 0.012 252 / 8%);
  --color-bg-overlay: oklch(0.163 0.012 252 / 75%);
  --color-bg-media: oklch(0.09 0.008 252 / 75%);
  --color-bg-media-base: var(--coryd-gray-920);
  --color-bg-disabled: var(--coryd-gray-300);

  /* Backgrounds, "brand". base/hover are the coryd button: the inverse surface.
   * soft/softest are highlighted (selected) content, so they tint red. */
  --color-bg-brand-base: var(--coryd-gray-800);
  --color-bg-brand-base-hover: var(--coryd-gray-700);
  --color-bg-brand-soft: color-mix(in oklch, var(--coryd-brand) var(--coryd-tint-active), var(--color-bg-primary));
  --color-bg-brand-softest: color-mix(in oklch, var(--coryd-brand) var(--coryd-tint-subtle), var(--color-bg-primary));

  /* Backgrounds, error */
  --color-bg-error-base: var(--coryd-error-light);
  --color-bg-error-base-hover: oklch(0.39 0.14 22);
  --color-bg-error-soft: oklch(0.94 0.04 22);
  --color-bg-error-softest: color-mix(in oklch, var(--coryd-error-light) var(--coryd-tint-subtle), var(--color-bg-primary));

  /* Backgrounds, warning */
  --color-bg-warning-base: var(--coryd-warning-light);
  --color-bg-warning-soft: oklch(0.94 0.04 88);
  --color-bg-warning-softest: color-mix(in oklch, var(--coryd-warning-light) var(--coryd-tint-subtle), var(--color-bg-primary));

  /* Backgrounds, success */
  --color-bg-success-base: var(--coryd-success-light);
  --color-bg-success-soft: oklch(0.94 0.04 148);
  --color-bg-success-softest: color-mix(in oklch, var(--coryd-success-light) var(--coryd-tint-subtle), var(--color-bg-primary));

  /* Borders. border-brand backs the focus ring, brand red as on coryd.dev (--color-focus).
   * border-brand-soft outlines highlighted content with the red tint. */
  --color-border-primary: var(--coryd-border-light);
  --color-border-brand: var(--coryd-brand);
  --color-border-brand-soft: color-mix(in oklch, var(--coryd-brand) 35%, transparent);
  --color-border-error: var(--coryd-error-light);
  --color-border-error-soft: color-mix(in oklch, var(--coryd-error-light) 35%, transparent);
  --color-border-warning-soft: color-mix(in oklch, var(--coryd-warning-light) 35%, transparent);
  --color-border-success-soft: color-mix(in oklch, var(--coryd-success-light) 35%, transparent);
  --color-border-media: oklch(0.668 0.012 252 / 25%);

  /* Shadows: a box-shadow value and a filter value, not colors. */
  --dropdown-shadow: 0 2px 8px oklch(0.15 0.012 252 / 15%);
  --overlay-icon-shadow: drop-shadow(0 1px 2px oklch(0.15 0.012 252 / 40%));

  /* Graphs */
  --color-graph-primary-stroke: var(--coryd-gray-700);
  --color-graph-primary-fill: color-mix(in oklch, var(--coryd-gray-700) 25%, transparent);
  --color-graph-warning-stroke: var(--coryd-warning-light);
  --color-graph-warning-fill: color-mix(in oklch, var(--coryd-warning-light) 25%, transparent);
  --color-graph-disabled-stroke: var(--coryd-gray-400);
  --color-graph-disabled-fill: color-mix(in oklch, var(--coryd-gray-400) 25%, transparent);

  /* Rich text (code and inline quotes in posts) */
  --rich-text-container-color: var(--coryd-gray-300);
  --rich-text-text-color: var(--coryd-gray-800);
  --rich-text-decorations-color: var(--coryd-gray-600);

  accent-color: var(--coryd-gray-700);
}

/* ── Dark (also the default when data-color-scheme is absent) ───────────── */

:root[data-color-scheme='dark']:not([data-contrast='high']),
:root:not([data-color-scheme]):not([data-contrast='high']) {
  --coryd-brand: var(--coryd-brand-dark);
  --coryd-selection: var(--coryd-selection-dark);

  /* Text */
  --color-text-primary: var(--coryd-text-dark);
  --color-text-secondary: var(--coryd-gray-400);
  --color-text-tertiary: var(--coryd-gray-500);
  --color-text-inverted: var(--coryd-gray-800);
  --color-text-brand: var(--coryd-text-dark);
  --color-text-brand-soft: var(--coryd-gray-400);
  --color-text-on-brand-base: var(--coryd-gray-800);
  --color-text-brand-on-inverted: var(--coryd-gray-800);
  --color-text-status-links: var(--coryd-text-dark);
  --color-text-error: var(--coryd-error-dark);
  --color-text-on-error-base: var(--coryd-gray-920);
  --color-text-warning: var(--coryd-warning-dark);
  --color-text-on-warning-base: var(--coryd-gray-920);
  --color-text-success: var(--coryd-success-dark);
  --color-text-on-success-base: var(--coryd-gray-920);
  --color-text-disabled: var(--coryd-gray-600);
  --color-text-on-disabled: var(--coryd-gray-500);
  --color-text-on-media: var(--coryd-gray-100);

  /* Selected-state icons */
  --color-text-bookmark-highlight: var(--coryd-brand);
  --color-text-favourite-highlight: var(--coryd-rating-fill);

  /* Backgrounds, neutral. --gray-880 stands in for --color-surface-alt here:
   * the package's --gray-840 (0.17) is indistinguishable from --gray-800
   * (0.163), which reads as a flat surface rather than a raised one. */
  --color-bg-primary: var(--coryd-gray-800);
  --color-bg-secondary: var(--coryd-gray-920);
  --color-bg-tertiary: var(--coryd-gray-880);

  /* Backgrounds, utility */
  --color-bg-inverted: var(--coryd-surface-inverse-dark);
  --color-bg-overlay-base: oklch(0.09 0.008 252 / 75%);
  --color-bg-overlay-highlight: oklch(0.96 0.006 252 / 8%);
  --color-bg-overlay: oklch(0.09 0.008 252 / 75%);
  --color-bg-media: oklch(0.09 0.008 252 / 75%);
  --color-bg-media-base: var(--coryd-gray-920);
  --color-bg-disabled: var(--coryd-gray-840);

  /* Backgrounds, "brand" */
  --color-bg-brand-base: var(--coryd-surface-inverse-dark);
  --color-bg-brand-base-hover: var(--coryd-gray-200);
  --color-bg-brand-soft: color-mix(in oklch, var(--coryd-brand) var(--coryd-tint-active), var(--color-bg-primary));
  --color-bg-brand-softest: color-mix(in oklch, var(--coryd-brand) var(--coryd-tint-subtle), var(--color-bg-primary));

  /* Backgrounds, error */
  --color-bg-error-base: var(--coryd-error-dark);
  --color-bg-error-base-hover: oklch(0.8 0.1 22);
  --color-bg-error-soft: oklch(0.2 0.04 22);
  --color-bg-error-softest: color-mix(in oklch, var(--coryd-error-dark) var(--coryd-tint-subtle), var(--color-bg-primary));

  /* Backgrounds, warning */
  --color-bg-warning-base: var(--coryd-warning-dark);
  --color-bg-warning-soft: oklch(0.2 0.04 88);
  --color-bg-warning-softest: color-mix(in oklch, var(--coryd-warning-dark) var(--coryd-tint-subtle), var(--color-bg-primary));

  /* Backgrounds, success */
  --color-bg-success-base: var(--coryd-success-dark);
  --color-bg-success-soft: oklch(0.2 0.04 148);
  --color-bg-success-softest: color-mix(in oklch, var(--coryd-success-dark) var(--coryd-tint-subtle), var(--color-bg-primary));

  /* Borders */
  --color-border-primary: var(--coryd-border-dark);
  --color-border-brand: var(--coryd-brand);
  --color-border-brand-soft: color-mix(in oklch, var(--coryd-brand) 35%, transparent);
  --color-border-error: var(--coryd-error-dark);
  --color-border-error-soft: color-mix(in oklch, var(--coryd-error-dark) 35%, transparent);
  --color-border-warning-soft: color-mix(in oklch, var(--coryd-warning-dark) 35%, transparent);
  --color-border-success-soft: color-mix(in oklch, var(--coryd-success-dark) 35%, transparent);
  --color-border-media: oklch(0.668 0.012 252 / 25%);

  /* Shadows: opacity rises in dark mode, per the package's --shadow-* tokens. */
  --dropdown-shadow: 0 2px 8px oklch(0.08 0.008 252 / 50%);
  --overlay-icon-shadow: drop-shadow(0 1px 2px oklch(0.08 0.008 252 / 60%));

  /* Graphs */
  --color-graph-primary-stroke: var(--coryd-gray-300);
  --color-graph-primary-fill: color-mix(in oklch, var(--coryd-gray-300) 25%, transparent);
  --color-graph-warning-stroke: var(--coryd-warning-dark);
  --color-graph-warning-fill: color-mix(in oklch, var(--coryd-warning-dark) 25%, transparent);
  --color-graph-disabled-stroke: var(--coryd-gray-400);
  --color-graph-disabled-fill: color-mix(in oklch, var(--coryd-gray-400) 25%, transparent);

  /* Rich text (code and inline quotes in posts) */
  --rich-text-container-color: var(--coryd-gray-840);
  --rich-text-text-color: var(--coryd-text-dark);
  --rich-text-decorations-color: var(--coryd-gray-400);

  accent-color: var(--coryd-gray-300);
}

/* ── Selection ──────────────────────────────────────────────────────────── */

/* Mastodon has no selection token. Mirrors @coryd/ui's components/selection.css with brand
 * red as the accent, the way coryd.dev sets --selection-accent. */
::selection {
  color: var(--color-text-primary);
  background-color: var(--coryd-selection);
}

/* ── Links ──────────────────────────────────────────────────────────────── */

/* With --color-text-brand == --color-text-primary, links in post bodies have no
 * color to distinguish them, so the underline carries the affordance, as on
 * coryd.dev (--underline-offset-default and -hover). These are internal Mastodon
 * class names, not tokens, so they can shift between releases; the token blocks
 * above can't. */
.status__content a,
.account__header__content a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-underline-offset 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.status__content a:is(:hover, :focus-visible, :active),
.account__header__content a:is(:hover, :focus-visible, :active) {
  text-underline-offset: 5px;
}

@media (prefers-reduced-motion) {
  .status__content a,
  .account__header__content a {
    transition: none;
  }

  .status__content a:is(:hover, :focus-visible, :active),
  .account__header__content a:is(:hover, :focus-visible, :active) {
    text-underline-offset: 3px;
  }
}