/* ---------------------------------------------------------------------------
   Sveltia CMS, dressed to match edwardkreyenbuhl.com.

   Sveltia renders into the light DOM — no shadow root — and exposes its whole
   design system as --sui-* custom properties, so the editor can be themed
   without forking or patching the bundle. We map those onto the portfolio's
   palette and typefaces.

   The point is not decoration. An editor that looks like a stock admin panel
   from a different product makes the site feel like it was assembled from
   parts; one that looks like the site makes it feel like the site's own back
   room. That matters more than usual here, because the person using it is a
   teenager being handed something that is supposed to feel like his.
--------------------------------------------------------------------------- */

@font-face {
  font-family: 'Instrument Serif';
  src: url('/fonts/instrument-serif-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter Variable';
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #faf9f6;
  --paper-sunk: #f2f0ea;
  --ink: #16150f;
  --ink-soft: #46433a;
  --ink-muted: #817c70;
  --rule: #e0ddd3;

  /* Sveltia derives most of its greys from one hue. Pulling it to a warm
     yellow-brown puts the whole editor on the same paper as the site instead
     of the default cool blue-grey. */
  --sui-base-hue: 42;

  --sui-font-family-default: 'Inter Variable', -apple-system, BlinkMacSystemFont, sans-serif;
  --sui-control-font-family: 'Inter Variable', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Primary action: ink on paper, not corporate blue. */
  --sui-button-primary-background-color: var(--ink);
  --sui-button-primary-background-color-focus: var(--ink-soft);
  --sui-button-primary-background-color-active: var(--ink-soft);
  --sui-button-primary-foreground-color: var(--paper);
  --sui-button-primary-foreground-color-focus: var(--paper);
  --sui-button-primary-foreground-color-active: var(--paper);
  --sui-button-primary-border-color: var(--ink);
  --sui-button-primary-font-weight: 500;
  --sui-button-large-border-radius: 3px;

  --sui-highlight-foreground-color: var(--ink);
  --sui-highlighted-foreground-color: var(--ink);
}

body {
  background-color: var(--paper);
}

/* --- Sign-in screen ------------------------------------------------------ */

/* Selectors are structural rather than by Svelte's hashed class names
   (.svelte-7ua6x9 and friends), which change whenever the bundle is rebuilt.
   The version is pinned, so those hashes are stable today — but pinning is a
   choice we might revisit, and a theme that shatters on upgrade is worse than
   no theme. */

/* The stock screen shows a logo and then "Sveltia CMS" underneath it. Our
   logo is a wordmark that already says whose editor this is, so the product
   name is redundant. Scoped to the block that actually contains the logo, so
   headings elsewhere in the editor are untouched. */
.inner:has(> img) > h1 {
  display: none;
}

/* The default logo is a 128px orange tile. Ours is a wordmark — it needs
   width and none of the tile's rounding. */
.inner > img {
  max-width: 22rem !important;
  width: 100% !important;
  height: auto !important;
  border-radius: 0 !important;
  background: none !important;
  margin-bottom: 2.25rem;
}

/* Sveltia's secondary buttons come through in its default blue regardless of
   --sui-base-hue, so they are set directly. */
button.sui.button.secondary {
  background-color: transparent !important;
  border-color: var(--rule) !important;
  color: var(--ink-soft) !important;
}

button.sui.button.secondary:hover,
button.sui.button.secondary:focus-visible {
  background-color: var(--paper-sunk) !important;
  border-color: var(--ink-muted) !important;
  color: var(--ink) !important;
}

button.sui.button.primary,
button.sui.button.secondary {
  border-radius: 3px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em;
}

/* --- Editor chrome ------------------------------------------------------- */

/* Long-form fields are the artist statement and the captions — the words that
   end up set in a serif on the site. Composing them in the same face makes
   line breaks and rhythm predictable. */
textarea,
[role='textbox'],
.cm-content {
  font-family: 'Instrument Serif', Georgia, serif !important;
  font-size: 1.05rem !important;
  line-height: 1.55 !important;
  color: var(--ink) !important;
}

/* Titles and slugs stay in the UI face — they are data, not prose. */
input[type='text'],
input[type='url'],
input[type='number'] {
  font-family: 'Inter Variable', -apple-system, sans-serif !important;
}