/* ==========================================================================
   Display Minis Hub — Design Tokens
   Drop-in CSS variables and base element rules. Loaded BEFORE the Tailwind
   build (`stylesheet_link_tag :app`) so Tailwind's @theme block can reference
   these custom properties.

   Source: design system zip from Claude Design (2026-04-26).
   Font URLs use bare filenames so Propshaft's CSS rewriter resolves them
   via the asset load path (relative `../fonts/...` paths are not rewritten).
   ========================================================================== */

/* --- Font loading ---------------------------------------------------------
   All fonts self-hosted under app/assets/fonts/ — GDPR-clean, no third-party
   requests. All fonts: SIL Open Font License — free to self-host commercially.
   ----------------------------------------------------------------------- */

/* Fraunces — latin + latin-ext, weights 400/500/600/700 ± italic */
@font-face {
  font-family: 'Fraunces';
  src: url("/assets/fraunces-400-23ee8fda.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url("/assets/fraunces-500-1a3d0c00.woff2") format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url("/assets/fraunces-600-31df7685.woff2") format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url("/assets/fraunces-700-64faf025.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url("/assets/fraunces-400-italic-bd8e6a1a.woff2") format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url("/assets/fraunces-500-italic-f5e0feab.woff2") format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url("/assets/fraunces-600-italic-c824f805.woff2") format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url("/assets/fraunces-700-italic-7dd1224d.woff2") format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Inter — latin + latin-ext, weights 300/400/500/600/700 ± italic */
@font-face {
  font-family: 'Inter';
  src: url("/assets/inter-300-01a46e93.woff2") format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url("/assets/inter-400-eb1eaf08.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url("/assets/inter-500-884e5151.woff2") format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url("/assets/inter-600-145184eb.woff2") format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url("/assets/inter-700-55a1c522.woff2") format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url("/assets/inter-300-italic-42f75024.woff2") format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url("/assets/inter-400-italic-f385f0b8.woff2") format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url("/assets/inter-500-italic-8e535366.woff2") format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url("/assets/inter-600-italic-4bc5d95a.woff2") format('woff2');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url("/assets/inter-700-italic-de84502c.woff2") format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* JetBrains Mono — weights 400 + 500 active; 300/600/700 ± italic also bundled */
@font-face {
  font-family: 'JetBrains Mono';
  src: url("/assets/jetbrains-mono-400-99f8339a.woff2") format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url("/assets/jetbrains-mono-500-e089dac3.woff2") format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ====== COLOR — neutrals (warm cream scale) ====== */
  --bg-cream:       #FBF7F1;  /* page background */
  --surface:        #FFFFFF;  /* card surface */
  --paper:          #FFFDF8;  /* raised surface (modals) */
  --bg-warm:        #FFF4E6;  /* community / user-generated content strips */
  --bg-warm-hover:  #FFEBD3;  /* hover on warm surfaces */
  --bg-deepnight:   #0A0907;  /* lightbox, near-black */

  --bg-muted:       #F1ECE0;  /* subtle surface (image wells, disabled inputs) */

  /* Foreground scale */
  --fg-1:           #1C1A16;  /* highest-contrast text */
  --fg-2:           #3B3731;  /* body text */
  --fg-muted:       #6B6558;  /* secondary text */
  --fg-subtle:      #9A9486;  /* tertiary / placeholder */
  --fg-disabled:    #C6BFAE;  /* disabled controls */
  --fg-on-accent:   #FFFFFF;  /* text on accent/dark backgrounds */

  /* Borders */
  --border-soft:    #E9E2D5;  /* default 1px border */
  --border-strong:  #CFC5B0;  /* emphasized border (form focus-adjacent) */
  --border-warm:    #F4E2C3;  /* border on warm surfaces */

  /* ====== COLOR — brand ====== */
  --accent-bronze:        #B86B2A;  /* primary */
  --accent-bronze-hover:  #9E5820;  /* hover */
  --accent-bronze-press:  #844818;  /* pressed */
  --accent-bronze-soft:   #FBEBDA;  /* tinted background (chips, notices) */
  --accent-bronze-soft-hover: #F6DFC2;
  --accent-bronze-ring:   rgba(184, 107, 42, 0.35);  /* focus ring */

  --accent-ink:           #2B3A55;  /* secondary / links */
  --accent-ink-hover:     #1C2940;
  --accent-ink-soft:      #E6ECF5;

  /* ====== COLOR — semantic ====== */
  --success:        #2E6B4B;
  --success-soft:   #E4F0E9;
  --success-border: #BFD8C7;
  --warning:        #A86A14;
  --warning-soft:   #FBEEDB;
  --warning-border: #EFD8AE;
  --danger:         #9B2C2C;
  --danger-soft:    #F7E2E1;
  --danger-border:  #EBC4C2;
  --info:           #2B3A55;
  --info-soft:      #E6ECF5;
  --info-border:    #CBD7EA;

  --diff-current:   #7B2222;
  --diff-proposed:  #1F5037;

  /* ====== TYPOGRAPHY ====== */
  --font-display:  'Fraunces', 'Source Serif 4', Georgia, serif;
  --font-sans:     'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Optical-sizing + variation axes for Fraunces. Apply on display elements. */
  --font-display-vars: "SOFT" 50, "WONK" 0;
  --font-mono:     'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* Sizes — slightly tighter than Tailwind defaults */
  --fs-xs:    0.75rem;   /* 12px — captions, footer, microcopy */
  --fs-sm:    0.8125rem; /* 13px — small UI */
  --fs-base:  0.9375rem; /* 15px — body */
  --fs-md:    1rem;      /* 16px — emphasized body */
  --fs-lg:    1.125rem;  /* 18px — lede, large UI */
  --fs-xl:    1.375rem;  /* 22px — H3 */
  --fs-2xl:   1.75rem;   /* 28px — H2 */
  --fs-3xl:   2.25rem;   /* 36px — H1 */
  --fs-display:3rem;     /* 48px — display / hero */

  /* Line heights */
  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.55;
  --lh-loose:  1.75;

  /* Letter spacing */
  --ls-tight:  -0.018em;
  --ls-normal: 0;
  --ls-wide:   0.02em;

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ====== SPACING (4-pt) ====== */
  --sp-0:   0;
  --sp-1:   2px;
  --sp-2:   4px;
  --sp-3:   8px;
  --sp-4:   12px;
  --sp-5:   16px;
  --sp-6:   20px;
  --sp-7:   24px;
  --sp-8:   32px;
  --sp-9:   40px;
  --sp-10:  48px;
  --sp-11:  64px;
  --sp-12:  96px;

  /* ====== RADIUS ====== */
  --radius-sm:   6px;
  --radius-input: 8px;
  --radius-btn:  10px;
  --radius-md:   12px;  /* default for cards */
  --radius-lg:   16px;  /* modals */
  --radius-pill: 999px;

  /* ====== SHADOWS (warm-cast) ====== */
  --shadow-1: 0 1px 2px rgba(73, 52, 28, 0.06);
  --shadow-2: 0 4px 16px -4px rgba(73, 52, 28, 0.12), 0 2px 4px rgba(73, 52, 28, 0.06);
  --shadow-3: 0 16px 48px -12px rgba(73, 52, 28, 0.24);

  /* ====== ANIMATION ====== */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in:   cubic-bezier(0.64, 0, 0.78, 0);
  --dur-fast:  120ms;
  --dur:       150ms;
  --dur-slow:  200ms;

  /* ====== LAYOUT ====== */
  --max-w-content: 1200px;
  --gutter:        16px;
}

@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

/* ==========================================================================
   Semantic element rules — use these directly on elements without needing
   to repeat token combinations.
   ========================================================================== */

.dmh-body, body.dmh-themed {
  background: var(--bg-cream);
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Headings */
.dmh-h1, h1.dmh {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: var(--font-display-vars);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
.dmh-h2, h2.dmh {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-variation-settings: var(--font-display-vars);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
.dmh-h3, h3.dmh {
  font-family: var(--font-sans);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
.dmh-h4, h4.dmh {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* Body */
.dmh-p  { font-size: var(--fs-base); line-height: var(--lh-normal); color: var(--fg-2); }
.dmh-lede { font-size: var(--fs-lg); line-height: var(--lh-normal); color: var(--fg-2); }
.dmh-small { font-size: var(--fs-sm); color: var(--fg-muted); }
.dmh-caption { font-size: var(--fs-xs); color: var(--fg-muted); letter-spacing: var(--ls-wide); }
.dmh-eyebrow {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
  color: var(--fg-muted);
  text-transform: uppercase;
  font-weight: var(--fw-medium);
}
.dmh-mono, code.dmh, kbd.dmh {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--bg-warm);
  color: var(--fg-2);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
}

/* Link — ink-blue text with a bronze underline (per design system). */
a.dmh, .dmh-link {
  color: var(--accent-ink);
  text-decoration: underline;
  text-decoration-color: var(--accent-bronze);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color var(--dur) var(--ease-out), text-decoration-color var(--dur) var(--ease-out);
}
a.dmh:hover, .dmh-link:hover {
  color: var(--accent-ink-hover);
  text-decoration-color: var(--accent-bronze-hover);
}
.dmh-link--danger,
.dmh-link--danger:hover {
  color: var(--danger);
  text-decoration-color: currentColor;
}

/* Focus */
.dmh-focus:focus-visible,
.dmh-body :focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent-bronze-ring);
  border-radius: var(--radius-sm);
}

/* Card */
.dmh-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur) var(--ease-out);
}
.dmh-card--hover:hover { box-shadow: var(--shadow-2); }
.dmh-card--warm {
  background: var(--bg-warm);
  border-color: var(--border-warm);
}

/* Button */
.dmh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: 10px 18px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.dmh-btn--primary {
  background: var(--accent-bronze);
  color: var(--fg-on-accent);
}
.dmh-btn--primary:hover { background: var(--accent-bronze-hover); }
.dmh-btn--primary:active { background: var(--accent-bronze-press); }
.dmh-btn--secondary {
  background: var(--surface);
  color: var(--fg-1);
  border-color: var(--border-soft);
}
.dmh-btn--secondary:hover { background: var(--bg-warm); border-color: var(--border-warm); }
.dmh-btn--ghost {
  background: transparent;
  color: var(--accent-ink);
}
.dmh-btn--ghost:hover { background: var(--accent-ink-soft); }
.dmh-btn--danger {
  background: transparent;
  color: var(--danger);
  border-color: var(--border-soft);
}
.dmh-btn--danger:hover { background: var(--danger-soft); border-color: var(--danger-border); }
.dmh-btn--sm { padding: 6px 12px; font-size: var(--fs-xs); }
.dmh-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Input */
.dmh-input, .dmh-select, .dmh-textarea {
  width: 100%;
  padding: 10px 12px;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-input);
  color: var(--fg-1);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.dmh-input:focus, .dmh-select:focus, .dmh-textarea:focus {
  outline: none;
  border-color: var(--accent-bronze);
  box-shadow: 0 0 0 3px var(--accent-bronze-ring);
}
.dmh-input::placeholder { color: var(--fg-subtle); }
.dmh-input--compact { padding: 6px 8px; height: 34px; }
.dmh-input:disabled, .dmh-input[disabled] {
  background: var(--bg-muted);
  color: var(--fg-disabled);
}

/* File input */
.dmh-file-input { font-size: var(--fs-sm); color: var(--fg-muted); }
.dmh-file-input::file-selector-button {
  margin-right: 16px;
  padding: 8px 16px;
  border-radius: var(--radius-input);
  border: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  font-family: var(--font-sans);
  background: var(--bg-warm);
  color: var(--accent-bronze);
  cursor: pointer;
  transition: background var(--dur) var(--ease-out);
}
.dmh-file-input::file-selector-button:hover { background: var(--border-warm); }
.dmh-file-input::file-selector-button:active { background: var(--accent-bronze-ring); }

/* Chip / tag */
.dmh-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border-soft);
  color: var(--fg-muted);
  cursor: pointer;
  transition: all var(--dur) var(--ease-out);
}
.dmh-chip:hover { border-color: var(--accent-bronze); color: var(--accent-bronze); }
.dmh-chip--active {
  background: var(--accent-bronze);
  border-color: var(--accent-bronze);
  color: var(--fg-on-accent);
}

/* Notice / callout */
.dmh-notice {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  border: 1px solid;
}
.dmh-notice--info    { background: var(--info-soft);    border-color: var(--info-border);    color: var(--info); }
.dmh-notice--warn    { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning); }
.dmh-notice--danger  { background: var(--danger-soft);  border-color: var(--danger-border);  color: var(--danger); }
.dmh-notice--success { background: var(--success-soft); border-color: var(--success-border); color: var(--success); }

/* Paper-grain overlay — apply to body or large areas */
.dmh-paper-grain {
  position: relative;
}
.dmh-paper-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url("../images/paper-grain.svg");
  opacity: 0.03;
  mix-blend-mode: multiply;
}