@import url("https://fonts.googleapis.com/css2?family=Libre+Caslon+Display&family=Libre+Caslon+Text:ital,wght@0,400;0,700;1,400&family=Libre+Franklin:wght@400;500;600&display=swap");

/* Arcmage base styles — every value comes from tokens.css */

.am { background: var(--surface); color: var(--ink); font-family: var(--font-serif); font-size: 17px; line-height: 28px; }
.am *, .am *::before, .am *::after { box-sizing: border-box; }

/* type helpers */
.am-display-xl { font-family: var(--font-display); font-size: 72px; line-height: 76px; letter-spacing: -0.01em; font-weight: 400; margin: 0; }
.am-display-lg { font-family: var(--font-display); font-size: 52px; line-height: 58px; font-weight: 400; margin: 0; }
.am-display-md { font-family: var(--font-display); font-size: 38px; line-height: 44px; font-weight: 400; margin: 0; }
.am-heading { font-family: var(--font-serif); font-size: 26px; line-height: 32px; font-weight: 700; margin: 0; }
.am-title { font-family: var(--font-serif); font-size: 20px; line-height: 28px; font-weight: 700; margin: 0; }
.am-body-lg { font-family: var(--font-serif); font-size: 19px; line-height: 30px; margin: 0; }
.am-body { font-family: var(--font-serif); font-size: 17px; line-height: 28px; margin: 0; }
.am-quote { font-family: var(--font-serif); font-style: italic; font-size: 22px; line-height: 32px; margin: 0; }
.am-ui { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; }
.am-label { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.am-caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.am-muted { color: var(--ink-muted); }

/* rules */
.am-rule { border: 0; border-top: var(--border-hairline) solid var(--line); margin: 0; }
.am-rule-trim { border: 0; border-top: var(--border-trim) solid var(--trim); margin: 0; }

/* buttons */
.am-btn { display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-4);
  font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 600; border-radius: var(--radius-1);
  border: var(--border-trim) solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; }
.am-btn:focus-visible, .am-input:focus-visible, .am-tab:focus-visible, .am-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.am-btn--primary { background: var(--regal); color: var(--on-accent); }
.am-btn--secondary { background: var(--graphite); color: var(--on-graphite); }
.am-btn--tertiary { background: var(--taupe); color: var(--on-taupe); }
.am-btn--outline { background: transparent; color: var(--ink); border-color: var(--trim); }
.am-btn--quiet { background: transparent; color: var(--regal-text); padding: 0 var(--space-2); }
.am-btn--sm { height: 32px; padding: 0 var(--space-3); }

/* links */
.am-link { color: var(--regal-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.am-cite { font-family: var(--font-sans); font-size: 11px; font-weight: 600; color: var(--regal-text); vertical-align: super; line-height: 0; margin-left: 1px; }

/* chips */
.am-chip { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 var(--space-2);
  font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; border-radius: var(--radius-pill); white-space: nowrap; }
.am-chip svg { width: 12px; height: 12px; }
.am-chip--verified { background: var(--ink); color: var(--paper); }
.am-chip--source { background: var(--taupe); color: var(--on-taupe); border-radius: var(--radius-2); font-weight: 500; }
.am-chip--disputed { background: transparent; color: var(--ink); border: var(--border-hairline) solid var(--trim); }
.am-chip--info { background: var(--regal); color: var(--on-accent); }

/* inputs */
.am-field { display: flex; flex-direction: column; gap: var(--space-2); }
.am-input { height: 40px; padding: 0 var(--space-3); background: var(--surface-raised); color: var(--ink);
  border: var(--border-hairline) solid var(--line); border-radius: var(--radius-1); font-family: var(--font-sans); font-size: 14px; }
.am-input::placeholder { color: var(--ink-muted); }

/* tabs */
.am-tabs { display: flex; gap: var(--space-5); border-bottom: var(--border-hairline) solid var(--line); }
.am-tab { padding: var(--space-2) 0 var(--space-3); font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500;
  color: var(--ink-muted); border-bottom: var(--border-trim) solid transparent; margin-bottom: -1px; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer; }
.am-tab[aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--trim); }

/* surfaces */
.am-card { background: var(--surface-raised); border: var(--border-hairline) solid var(--line); border-radius: var(--radius-1); padding: var(--space-4); }
.am-frame { background: var(--surface-raised); border: var(--border-trim) solid var(--trim); border-radius: var(--radius-0); padding: var(--space-5); }
.am-quoteblock { border-top: var(--border-hairline) solid var(--trim); border-bottom: var(--border-hairline) solid var(--trim); padding: var(--space-4) 0; }
.am-notice { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border: var(--border-hairline) solid var(--line); background: var(--surface-raised); border-radius: var(--radius-1); font-family: var(--font-sans); font-size: 14px; line-height: 20px; }
.am-notice svg { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.am-notice--info svg { color: var(--regal-text); }
.am-notice--error { border-color: var(--trim); }
.am-notice--error svg { color: var(--ink); }

/* paisley — black on white in Gallery, white on black in Night; crimson and verdant live in the rules */
.am-ornate { border-style: solid; border-width: 64px; border-image: url("../assets/paisley/frame-ink.svg") 112 round; background: var(--paper); }
[data-theme="dark"] .am-ornate { border-image-source: url("../assets/paisley/frame-paper.svg"); }
.am-ornate--crimson { border-image-source: url("../assets/paisley/frame-ink-crimson.svg"); }
[data-theme="dark"] .am-ornate--crimson { border-image-source: url("../assets/paisley/frame-paper-crimson.svg"); }
.am-ornate--verdant { border-image-source: url("../assets/paisley/frame-ink-verdant.svg"); }
[data-theme="dark"] .am-ornate--verdant { border-image-source: url("../assets/paisley/frame-paper-verdant.svg"); }
.am-ornate--sm { border-width: 40px; }

/* the mat between frame and content: plain, a crimson mini border, or verdant sides */
.am-mat { padding: var(--space-5); background: var(--paper); }
.am-mat--crimson { box-shadow: inset 0 0 0 4px var(--crimson); padding: calc(var(--space-5) + 4px); }
.am-mat--verdant { border-left: var(--space-3) solid var(--verdant); border-right: var(--space-3) solid var(--verdant); }

/* bands: 64px strips of the border */
.am-band { height: 64px; background: var(--paper) url("../assets/paisley/band-ink.svg") repeat-x center / auto 64px; }
[data-theme="dark"] .am-band { background-image: url("../assets/paisley/band-paper.svg"); }
.am-band--crimson { background-image: url("../assets/paisley/band-ink-crimson.svg"); }
[data-theme="dark"] .am-band--crimson { background-image: url("../assets/paisley/band-paper-crimson.svg"); }
.am-band--verdant { background-image: url("../assets/paisley/band-ink-verdant.svg"); }
[data-theme="dark"] .am-band--verdant { background-image: url("../assets/paisley/band-paper-verdant.svg"); }

/* gallery blocks: color compositions between sections — square, flush, bled to the edges */
.am-blocks { display: grid; gap: var(--space-2); }
.am-blocks > * { min-height: 16px; }
.am-b-ink { background: var(--ink); }
.am-b-crimson { background: var(--crimson); }
.am-b-verdant { background: var(--verdant); }
.am-b-taupe { background: var(--taupe); }
.am-b-regal { background: var(--regal); }
.am-b-boteh { background: var(--chrome) url("../assets/paisley/boteh-paper.svg") no-repeat center / auto 72%; }