/* mikefullerton — ember on ink, set in Iosevka.
 *
 * The shipped look of mikefullerton.com: the same ember the lamp is lit with on
 * fishlamp.com (--color-ember in that site's globals.css), over near-black, in
 * the same self-hosted Iosevka. The two sites are one person; they light the
 * same way.
 *
 * This file used to describe a DIFFERENT site — Instrument Serif and DM Mono off
 * a Google Fonts @import, gold #8a6d20 light / #c4a35a dark. mikefullerton.com
 * moved to ember and Iosevka and left this behind, then defended itself by
 * re-declaring every token in its own styles.css on `:root, :root.dark`, where
 * the extra `.dark` out-specifies the plain `:root` here. That worked for the
 * tokens and did nothing for `body`, which is the same specificity in both files
 * and so came down to whichever stylesheet Next happened to order last — this
 * one. The page has been painting #0e0e14 under a #c4a35a glow ever since,
 * while every gradient drawn on top of it faded to #0c0c0f.
 *
 * So the palette below IS the site's palette now, and the site declares none of
 * its own. One value per role, here.
 *
 * SINGLE MODE, always dark. mikefullerton.com has one appearance and no toggle
 * (see its layout.tsx), so a light variant would be a second palette nobody has
 * ever seen and nobody would notice going wrong.
 *
 * NO WEBFONT @import, unlike this package's older skins. Iosevka arrives from
 * the host — mikefullerton.com self-hosts the subset pair as --font-iosevka via
 * next/font — and degrades to the platform monospace where the host has none. A
 * theme is the wrong place to put a third-party request on someone else's page.
 *
 * TWO VOCABULARIES, ONE SET OF VALUES. The short names (--bg, --text, --accent,
 * …) are what the site's own CSS is written in. The --color-*, --font-* and
 * --pc-* names are the contract this package's base.css files read from a theme.
 * The second set is aliases of the first, so there is still one hex per role.
 */

/* === Tokens === */

:root {
  /* --- The palette ----------------------------------------------------- */

  /* Surfaces. --bg is what every gradient on the site fades to, and what
   * layout.tsx hands the browser as `themeColor` so the mobile chrome blends
   * into the page — three readers of one value, which is the argument for it
   * living in exactly one place. */
  --bg: #0c0c0f;
  --surface: rgba(20, 20, 26, 0.94);

  --border: #2a2a36;
  --border-subtle: #1e1e28;

  --text: #e8e6e3;
  --text-muted: #8a8a9a;
  --text-dim: #5a5a6a;

  /* fishlamp.com's ember, the gold of the lamp the studio is named after. */
  --accent: #e8a33d;
  --accent-dim: rgba(232, 163, 61, 0.15);

  /* --- The typeface ---------------------------------------------------- */

  /* One face in four roles. The roles still differ even where the family no
   * longer does, so they keep four names: collapsing them here would mean
   * hunting down every call site to ever set them apart again. */
  --font-mono: var(--font-iosevka, 'Iosevka'), ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: var(--font-mono);
  --font-sans: var(--font-mono);
  --font-read: var(--font-mono);

  /* --- The toolkit's token contract, aliased onto the palette ---------- */

  --color-surface: var(--bg);
  --color-surface-raised: var(--surface);
  --color-border: var(--border);
  --color-border-subtle: var(--border-subtle);

  --color-text-primary: var(--text);
  --color-text-secondary: var(--text-muted);
  --color-text-dim: var(--text-dim);

  --color-accent: var(--accent);
  --color-accent-dim: var(--accent-dim);

  /* The status hues have no short name because the site has no use for them —
   * only the chat below reads them. --color-info is also the one hue here that
   * is not ember: the reader's side of a conversation, so the two speakers are
   * told apart by more than which edge they sit on. */
  --color-success: #5cb270;
  --color-error: #d45454;
  --color-info: #5a8fd4;

  --scp-shiki-theme: 'github-dark';

  /* --- Chat ------------------------------------------------------------ */

  /* Every tint is mixed from a palette token rather than written out as a
   * fourth copy of the ember, so a change to --accent carries here too. */
  --pc-font: var(--font-mono);
  --pc-radius: 3px;
  --pc-surface: color-mix(in srgb, var(--bg) 55%, transparent);
  --pc-persona-bg: color-mix(in srgb, var(--accent) 8%, transparent);
  --pc-persona-border: color-mix(in srgb, var(--accent) 15%, transparent);
  --pc-persona-text: var(--text);
  --pc-persona-name: var(--accent);
  --pc-user-bg: color-mix(in srgb, var(--color-info) 8%, transparent);
  --pc-user-border: color-mix(in srgb, var(--color-info) 15%, transparent);
  --pc-user-text: var(--text);
  --pc-user-name: var(--color-info);
  --pc-input-bg: color-mix(in srgb, var(--bg) 60%, transparent);
  --pc-input-border: var(--border);
  --pc-input-focus: var(--accent);
  --pc-send-bg: transparent;
  --pc-send-text: var(--accent);
  --pc-time-color: var(--text-dim);
}

/* === Site surface === */

/* Flat, with no radial glow behind it. The version this replaces washed the top
 * of the page in --color-accent-dim, which on a site whose first screen is a
 * full-bleed photograph was never visible anywhere it could be judged. */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 13.5px;
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

/* A wash the ember shows through, not a block of it. Selecting a line should
 * mark it, not repaint it. */
::selection { background: var(--accent-dim); color: var(--accent); }

.prose {
  --tw-prose-body: var(--color-text-primary);
  --tw-prose-headings: var(--color-text-primary);
  --tw-prose-links: var(--color-info);
  --tw-prose-bold: var(--color-accent);
  --tw-prose-code: var(--color-accent);
  --tw-prose-pre-bg: var(--color-surface-raised);
  --tw-prose-pre-code: var(--color-text-primary);
  --tw-prose-counters: var(--color-text-secondary);
  --tw-prose-bullets: var(--color-text-dim);
  --tw-prose-hr: var(--color-border);
  --tw-prose-quotes: var(--color-text-secondary);
  --tw-prose-quote-borders: var(--color-accent);
  --tw-prose-th-borders: var(--color-border);
  --tw-prose-td-borders: var(--color-border-subtle);
  --tw-prose-captions: var(--color-text-dim);
}

/* No `font-style: italic` on the display type. It was there for Instrument
 * Serif, which ships a drawn italic; the Iosevka subset is Regular and Bold
 * only, so the browser would answer with a synthetic oblique — the whole face
 * sheared a few degrees. Tracking opens up instead. */
.prose :where(h1, h2):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-accent);
}
.prose :where(h3, h4):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85em;
}
.prose :where(a):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
  color: var(--color-info);
  text-decoration: none;
  border-bottom: 1px dotted var(--color-info);
}
.prose :where(code):not(:where(pre *, [class~='not-prose'], [class~='not-prose'] *)) {
  font-family: var(--font-mono);
  background: var(--color-surface-raised);
  padding: 0.1em 0.3em;
  border-radius: 2px;
  border: 1px solid var(--color-border-subtle);
}
.prose :where(pre):not(:where([class~='not-prose'], [class~='not-prose'] *)) {
  border: 1px solid var(--color-border);
  border-radius: 4px;
  backdrop-filter: blur(16px);
}

/* === Chat surface === */

.persona-chat {
  font-family: var(--pc-font);
  background: var(--pc-surface);
  backdrop-filter: blur(16px);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.persona-chat .pc-transcript {
  padding: 12px;
  gap: 6px;
}
.persona-chat .pc-transcript::-webkit-scrollbar { width: 3px; }
.persona-chat .pc-transcript::-webkit-scrollbar-track { background: transparent; }
.persona-chat .pc-transcript::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 1px;
}

.persona-chat .pc-message {
  animation: pc-mf-in 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pc-mf-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.persona-chat .pc-avatar { display: none; }

.persona-chat .pc-bubble {
  padding: 6px 10px;
  border-radius: var(--pc-radius);
  font-size: 11px;
  line-height: 1.5;
}
.persona-chat .pc-persona .pc-bubble {
  background: var(--pc-persona-bg);
  color: var(--pc-persona-text);
  border: 1px solid var(--pc-persona-border);
}
.persona-chat .pc-user .pc-bubble {
  background: var(--pc-user-bg);
  color: var(--pc-user-text);
  border: 1px solid var(--pc-user-border);
}

.persona-chat .pc-sender {
  font-size: 9px;
  font-family: var(--pc-font);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 2px;
}
.persona-chat .pc-persona .pc-sender { color: var(--pc-persona-name); }
.persona-chat .pc-user .pc-sender { color: var(--pc-user-name); }

.persona-chat .pc-time {
  font-size: 8px;
  color: var(--pc-time-color);
  margin-top: 2px;
  font-family: var(--pc-font);
}

.persona-chat .pc-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
  opacity: 0.3;
  animation: pc-mf-glow 1.6s ease-in-out infinite;
}
.persona-chat .pc-dots span:nth-child(2) { animation-delay: 0.25s; }
.persona-chat .pc-dots span:nth-child(3) { animation-delay: 0.5s; }
@keyframes pc-mf-glow {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.7; }
}

.persona-chat .pc-input-area {
  background: color-mix(in srgb, var(--color-surface) 60%, transparent);
  border-top: 1px solid var(--color-border);
  padding: 8px 10px;
  gap: 8px;
}
.persona-chat .pc-input {
  padding: 7px 10px;
  border: 1px solid var(--pc-input-border);
  border-radius: 3px;
  font-family: var(--pc-font);
  font-size: 11px;
  background: var(--pc-input-bg);
  color: var(--color-text-primary);
}
.persona-chat .pc-input:focus { border-color: var(--pc-input-focus); }
.persona-chat .pc-input::placeholder { color: var(--color-text-dim); }

.persona-chat .pc-send-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background: var(--pc-send-bg);
  color: var(--pc-send-text);
}
.persona-chat .pc-send-btn svg { display: none; }
.persona-chat .pc-send-btn::after {
  content: '\203A';
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
}
.persona-chat .pc-send-btn:hover {
  background: var(--color-accent);
  color: var(--color-surface);
  border-color: var(--color-accent);
}
.persona-chat .pc-send-btn:active { opacity: 0.8; }
.persona-chat .pc-send-btn:disabled {
  opacity: 0.2;
  background: transparent;
  color: var(--color-text-dim);
}

/* Rich content */
.persona-chat .pc-content-link {
  color: var(--pc-persona-text);
  text-decoration: underline;
  text-decoration-color: var(--pc-persona-name);
  text-underline-offset: 2px;
  font-size: 11px;
}
.persona-chat .pc-content-link:hover { color: var(--pc-persona-name); }
.persona-chat .pc-content-image {
  border-radius: 3px;
  border: 1px solid var(--color-border);
}

/* Popover */
.persona-chat .pc-popover {
  background: color-mix(in srgb, var(--color-surface-raised) 94%, transparent);
  backdrop-filter: blur(16px);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 12px;
}
.persona-chat .pc-popover-title {
  font-family: var(--pc-font);
  font-size: 12px;
  color: var(--color-accent);
}
.persona-chat .pc-popover-desc {
  font-size: 11px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.persona-chat .pc-popover-link {
  color: var(--pc-persona-text);
  text-decoration: underline;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 2px;
  font-size: 11px;
  padding: 2px 0;
  display: block;
}
.persona-chat .pc-popover-link:hover { color: var(--color-accent); }
.persona-chat .pc-popover-toggle { color: var(--color-accent); }
.persona-chat .pc-popover-toggle:hover { color: color-mix(in srgb, var(--color-accent) 80%, white); }
.persona-chat .pc-popover-arrow { border-top-color: var(--color-accent); }