/* ============================================================================
   THE HOMELAB FILES — mastodon-noir  (v1.1)
   Skin for md.thehomelabfiles.org (glitch-soc 4.7.5)

   Delivered via Administration -> Appearance -> Custom CSS (Setting.custom_css),
   served same-origin at /custom.css, so it needs no CSP change: 'self' covers it.

   Two layers, in this order:

   1. SEMANTIC TOKENS (--color-bg-*, --color-text-*, ...) — this is the layer the
      components actually consume. Set these and most of the UI follows.
   2. BASE PALETTE (--color-grey-*, --color-indigo-*) — the fallback for anything
      reading the raw ramp, plus component-level flourishes.

   History worth keeping: the first attempt only remapped the palette and left
   every panel white, because in this design system `--color-white` means
   SURFACE, not text. The semantic layer above is the correct lever; the palette
   remap is the safety net underneath it.

   Palette is byte-identical to the landing page and the thf-noir Ghost theme:
   ink #1e1f21 · coal #232628 · panel #262b2f · line #353d43
   tungsten #a59365 · amber #dda642 · lamp #ffd166
   paper #eee9dd · paper-dim #bdb7ab · glow #7fd6d0 · red #e3391b
   ========================================================================== */

/* ---- layer 1: semantic tokens — the real lever ---- */
html:root {
  /* surfaces */
  --color-bg-primary: #1e1f21;          /* ink — page and column ground */
  --color-bg-secondary: #232628;        /* coal — raised blocks */
  --color-bg-tertiary: #262b2f;         /* panel — inputs, cards */
  --color-bg-inverted: #eee9dd;         /* paper — inverted surface */
  --color-bg-overlay: #141517;
  --color-bg-media-base: #141517;

  /* brand: aged brass / amber, with ink sitting on it */
  --color-bg-brand-base: #dda642;
  --color-bg-brand-base-hover: #e8b455;
  --color-bg-brand-soft: #3a2f1c;
  --color-bg-brand-softest: #241f16;
  --color-text-brand: #dda642;
  --color-text-on-brand-base: #191408;
  --color-border-brand: #dda642;

  /* text */
  --color-text-primary: #eee9dd;        /* paper */
  --color-text-secondary: #bdb7ab;      /* paper-dim */
  --color-text-tertiary: #8b8578;
  --color-text-disabled: #6d6a5f;
  --color-text-inverted: #1e1f21;
  --color-text-on-media: #eee9dd;

  /* structure */
  --color-border-primary: #353d43;      /* line */
  --color-border-strong: #4a545c;
  --color-outline: #dda642;
  --color-shadow: #0d0e0f;
  --color-highlight: #353d43;
}

/* ---- layer 2: base palette — fallback for raw-ramp readers ---- */
html {
  --color-white:    #1e1f21;   /* SURFACE, not text — see history above */
  --color-black:    #eee9dd;
  --color-grey-50:  #212326;
  --color-grey-100: #262b2f;
  --color-grey-200: #2c3236;
  --color-grey-300: #353d43;
  --color-grey-400: #424b52;
  --color-grey-500: #8b8578;
  --color-grey-600: #a8a294;
  --color-grey-700: #bdb7ab;
  --color-grey-800: #d3cdc1;
  --color-grey-900: #e3ded2;
  --color-grey-950: #eee9dd;

  --color-indigo-50:  #241f16;
  --color-indigo-100: #2b2418;
  --color-indigo-200: #3a2f1c;
  --color-indigo-300: #574722;
  --color-indigo-400: #8a7134;
  --color-indigo-500: #a59365;   /* tungsten */
  --color-indigo-600: #dda642;   /* amber */
  --color-indigo-700: #dda642;
  --color-indigo-800: #e8b455;
  --color-indigo-900: #f0c05a;
  --color-indigo-950: #2a2418;

  --color-red-500: #e3391b;
  --color-red-600: #ff5c3a;

  /* type: serif body, display headings, mono labels */
  --font-body: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --font-heading: 'DejaVu Sans', 'Liberation Sans', system-ui, sans-serif;
  --font-monospace: 'DejaVu Sans Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ls-normal: .01em;
  --ls-loose: .04em;

  /* noir geometry: hard corners */
  --radius-xs: 2px;
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 3px;
  --radius-xl: 3px;
  --radius-round: 2px;
  --avatar-border-radius: 0;
  --outline-focus-default: 2px solid #dda642;

  color-scheme: dark;
}

/* ---- page ground + viewport vignette (behind content, never over type) ---- */
html,
body {
  background: #1e1f21 !important;
  color: #eee9dd !important;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(120% 80% at 50% 0%, transparent 38%, rgba(0, 0, 0, .5) 100%);
}

/* ---- headings take the display face, tightened like the site ---- */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  letter-spacing: -.01em;
}

/* ---- the publication's amber focus ring ---- */
:focus-visible {
  outline: 2px solid #dda642;
  outline-offset: 2px;
}