/* ── Primitives: coryd.dev raw scale (mode-independent) ─────────────────── */

: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);

  /* Highlight / selected-state only. Single mode-independent value, as shipped. */
  --coryd-brand: oklch(0.51 0.17 19);
  --coryd-opacity-highlight: 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']) {
  /* Text. brand == primary: links carry no colour, 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-coryd earns a solid colour. */
  --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: inverse surface.
   * soft/softest are highlighted (i.e. 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 → --color-accent.
   * border-brand-soft outlines highlighted content → the red tint. */
  --color-border-primary: var(--coryd-gray-400);
  --color-border-brand: var(--coryd-gray-700);
  --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 colours. */
  --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 + 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']) {
  /* Text */
  --color-text-primary: var(--coryd-gray-200);
  --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-gray-200);
  --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-gray-200);
  --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. The shipped --brand-coryd (L 0.51) only reaches ~3.3:1
   * on the dark surface — fine for a 24px glyph, too low for text. */
  --color-text-bookmark-highlight: var(--coryd-brand);
  --color-text-favourite-highlight: var(--coryd-warning-dark);

  /* 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-gray-200);
  --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-gray-200);
  --color-bg-brand-base-hover: var(--coryd-gray-100);
  --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-gray-400);
  --color-border-brand: var(--coryd-gray-300);
  --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 + inline quotes in posts) */
  --rich-text-container-color: var(--coryd-gray-840);
  --rich-text-text-color: var(--coryd-gray-200);
  --rich-text-decorations-color: var(--coryd-gray-400);

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

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

/* Mastodon has no selection token. Ported verbatim from base/index.css. */
::selection {
  color: var(--color-text-inverted);
  background-color: color-mix(in srgb, var(--coryd-brand) var(--coryd-opacity-highlight), transparent);
}

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

/* With --color-text-brand == --color-text-primary, links in post bodies have no
 * colour to distinguish them, so the underline has to carry the affordance —
 * as it does on coryd.dev. These are internal Mastodon class names, not tokens,
 * so they can shift between releases; the token blocks above cannot. */
.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;
  }
}