/* Bear Style for mastodon.denike.io: Red Graphite (light) and Dark Graphite (dark), matching the
 * user's Obsidian setup (Bear Style v1.2.1 + bear-palette-red-graphite). Applied as Mastodon's
 * Custom CSS by migration/importer/08_theme.rb.
 *
 * Mastodon 4.7.2 draws its colours from the tokens in app/javascript/styles/mastodon/tokens/,
 * set on [data-color-scheme='light' | 'dark']. Custom CSS loads after the theme, so redefining
 * the tokens on the same selectors re-colours everything built from them. Recheck the token
 * names after a Mastodon upgrade.
 *
 * Fonts: Bear Sans UI is Bear's own typeface. It is not served from here; it shows where it
 * is installed (the owner's Mac), and everyone else gets their system font.
 */

html,
html[data-redesign='true'] {
  --font-body: 'Bear Sans UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-heading: 'Bear Sans UI Heading', 'Bear Sans UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
}

/* Red Graphite (light) */
[data-color-scheme='light'] {
  --bear-red: #dd4c4f;

  --color-text-primary: #444444;
  --color-text-secondary: #888888;
  --color-text-tertiary: #a8a8a8;
  --color-text-brand: var(--bear-red);
  --color-text-brand-soft: color-mix(in srgb, var(--bear-red) 75%, #ffffff);
  --color-text-on-brand-base: #ffffff;
  --color-text-status-links: var(--bear-red);

  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f3f5f7;
  --color-bg-tertiary: #e9ecef;
  --color-bg-brand-base: var(--bear-red);
  --color-bg-brand-base-hover: #c63f42;
  --color-bg-brand-soft: color-mix(in srgb, var(--bear-red) 20%, #ffffff);
  --color-bg-brand-softest: color-mix(in srgb, var(--bear-red) 8%, #ffffff);

  --color-border-primary: #d9d9d9;
  --color-border-strong: #bfbfbf;
  --color-border-brand: var(--bear-red);
  --color-border-brand-soft: color-mix(in srgb, var(--bear-red) 40%, #ffffff);

  --rich-text-decorations-color: var(--bear-red);
}

[data-color-scheme='light'] ::selection {
  background: #d3e6fb;
}

/* The navigation pane gets Bear's dark graphite sidebar. Redefining the tokens here re-themes
 * everything inside it (links, buttons, the sign-in box) consistently. The pane itself has no
 * height on desktop; its fixed-position inner element is what gets painted. */
[data-color-scheme='light'] .columns-area__panels__pane--navigational {
  --color-text-primary: #ffffff;
  --color-text-secondary: #d1d1d1;
  --color-text-tertiary: #a5a6a6;
  --color-bg-primary: #2e3235;
  --color-bg-secondary: #474747;
  --color-bg-tertiary: #3a3e41;
  --color-border-primary: #474747;
  --color-border-strong: #5a5e61;
}

[data-color-scheme='light'] .columns-area__panels__pane--navigational .columns-area__panels__pane__inner {
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
}

/* Dark Graphite (dark). Buttons use a deeper shade of Bear's blue so white text on them stays
 * readable (4.5:1); links and highlights keep #44a2e5. */
[data-color-scheme='dark'],
html:not([data-color-scheme]) {
  --bear-blue: #44a2e5;

  --color-text-primary: #dfe0e0;
  --color-text-secondary: #a2a3a4;
  --color-text-tertiary: #7f8c97;
  --color-text-brand: var(--bear-blue);
  --color-text-brand-soft: color-mix(in srgb, var(--bear-blue) 75%, #1d1e1f);
  --color-text-on-brand-base: #ffffff;
  --color-text-status-links: var(--bear-blue);

  --color-bg-primary: #1d1e1f;
  --color-bg-secondary: #2c2d2f;
  --color-bg-tertiary: #2e2f30;
  --color-bg-brand-base: #2b7bb9;
  --color-bg-brand-base-hover: #3a8fd0;
  --color-bg-brand-soft: color-mix(in srgb, var(--bear-blue) 25%, #1d1e1f);
  --color-bg-brand-softest: color-mix(in srgb, var(--bear-blue) 12%, #1d1e1f);

  --color-border-primary: #3a3b3d;
  --color-border-strong: #454647;
  --color-border-brand: var(--bear-blue);
  --color-border-brand-soft: color-mix(in srgb, var(--bear-blue) 40%, #1d1e1f);

  --rich-text-decorations-color: var(--bear-blue);
}

[data-color-scheme='dark'] ::selection,
html:not([data-color-scheme]) ::selection {
  background: #454d56;
}