/*
 * The Weave design tokens — the only stylesheet that may contain raw colors, font families,
 * type sizes or radii. Components consume the --weave-* roles below. docs/DESIGN_SYSTEM.md
 * documents each role; tests/ui/design_tokens.test.js enforces the boundary.
 */

@font-face {
  font-family: "Fraunces";
  src: url("/ui/assets/fonts/fraunces-roman.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/ui/assets/fonts/fraunces-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/ui/assets/fonts/newsreader-roman.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/ui/assets/fonts/newsreader-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
}
/* The approved wordmark is a separate static Fraunces instance (opsz 144, SOFT 50, WONK 1). */
@font-face {
  font-family: "Weave Fraunces";
  src: url("/ui/assets/branding/fraunces-wordmark.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  /* Color — Rubric (docs/DESIGN_SYSTEM.md; round twenty-eight). Vellum surfaces, iron-gall ink,
     vermilion for everything you can act on and for labels, gilt for the flame and the spark.
     Roles, not hues: pick by job, never by appearance. */
  --weave-color-canvas: #fbf8f0;
  --weave-color-paper: #fffdf7;
  --weave-color-ink: #1b1512;
  --weave-color-secondary: #5a4f47;
  --weave-color-rule: #e3dacb;
  --weave-color-rule-strong: #cbbda6;
  --weave-color-action: #a8321d;
  --weave-color-action-hover: #8a2716;
  --weave-color-on-action: #fffaf0;
  --weave-color-selected: #f6e4dc;
  --weave-color-hover: #f6efe4;
  --weave-color-tint: rgb(168 50 29 / 6%);
  --weave-color-spark: #b58b35;
  --weave-color-rail: #fbf8f0;
  --weave-color-rail-text: #3b312b;
  --weave-color-rail-active: rgb(168 50 29 / 6%);
  --weave-color-deep-ink: #1b1512;
  --weave-color-on-deep: #fffdf7;
  --weave-color-scrim: rgb(27 21 18 / 42%);

  /* Status — always paired with a readable label; never decoration. */
  --weave-color-success: #286047;
  --weave-color-success-surface: #e4eee6;
  --weave-color-warning: #805510;
  --weave-color-warning-surface: #f3e8cd;
  --weave-color-danger: #a12c3d;
  --weave-color-danger-surface: #f5dfdd;

  /* Third-party sign-in marks keep their owners' colors. */
  --weave-color-brand-discord: #5865f2;
  --weave-color-brand-discord-hover: #4752c4;

  /* Typography */
  --weave-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --weave-font-reading: "Newsreader", "Iowan Old Style", Georgia, serif;
  --weave-font-ui: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --weave-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --weave-font-wordmark: "Weave Fraunces", "Fraunces", Georgia, serif;

  --weave-text-2xs: 0.75rem;     /* 12px — eyebrows, tags */
  --weave-text-xs: 0.8125rem;    /* 13px — captions, metadata */
  --weave-text-sm: 0.875rem;     /* 14px — controls, secondary UI */
  --weave-text-md: 1rem;         /* 16px — default UI text */
  --weave-text-lg: 1.1875rem;    /* 19px — reading prose */
  --weave-text-xl: 1.4375rem;    /* 23px — section headings */
  --weave-text-2xl: 1.8125rem;   /* 29px — page headings */
  --weave-text-3xl: clamp(2.25rem, 1.8rem + 1.6vw, 2.875rem);  /* 36–46px — article titles */
  --weave-text-4xl: clamp(2.75rem, 2rem + 2.6vw, 3.75rem);     /* 44–60px — display */

  --weave-leading-tight: 1.12;
  --weave-leading-snug: 1.3;
  --weave-leading-ui: 1.5;
  --weave-leading-reading: 1.65;

  --weave-weight-regular: 400;
  --weave-weight-medium: 500;
  --weave-weight-semibold: 600;
  --weave-weight-bold: 700;

  --weave-tracking-caps: 0.08em;
  --weave-measure-prose: 40rem;

  /* Space — 4px base; 8px rhythm for layout. */
  --weave-space-1: 0.25rem;  /* 4 */
  --weave-space-2: 0.5rem;   /* 8 */
  --weave-space-3: 0.75rem;  /* 12 */
  --weave-space-4: 1rem;     /* 16 */
  --weave-space-5: 1.5rem;   /* 24 */
  --weave-space-6: 2rem;     /* 32 */
  --weave-space-7: 3rem;     /* 48 */
  --weave-space-8: 4rem;     /* 64 */
  --weave-space-9: 6rem;     /* 96 */

  /* Shape and depth */
  --weave-radius-sm: 2px;    /* controls, tags: square-cut, as a scribe's rule */
  --weave-radius-md: 4px;    /* panels, dialogs, images */
  --weave-radius-lg: 24px;   /* subject art banners and picture controls */
  --weave-radius-full: 999px;/* avatars, round icon buttons */
  --weave-shadow-raised: 0 1px 2px rgb(27 21 18 / 6%), 0 4px 12px rgb(27 21 18 / 6%);
  --weave-shadow-overlay: 0 16px 48px rgb(27 21 18 / 16%), 0 2px 8px rgb(27 21 18 / 8%);

  /* Motion — state feedback only; reduced motion disables it. */
  --weave-duration-fast: 120ms;
  --weave-duration-base: 200ms;
  --weave-duration-slow: 320ms;
  --weave-ease: cubic-bezier(.22, 1, .36, 1);

  /*
   * Legacy aliases — do not use in new code. Each maps an older name onto a role above and is
   * deleted once the ratchet in tests/ui/design_tokens.test.js reaches zero for that name.
   */
  --bg-deep: var(--weave-color-canvas);
  --bg-panel: var(--weave-color-selected);
  --bg-card: var(--weave-color-paper);
  --bg-hover: var(--weave-color-hover);
  --bg-primary: var(--weave-color-paper);
  --surface-subtle: var(--weave-color-tint);
  --panel-bg: var(--weave-color-paper);
  --text-primary: var(--weave-color-ink);
  --text-secondary: var(--weave-color-secondary);
  --text-muted: var(--weave-color-secondary);
  --text-main: var(--weave-color-ink);
  --accent-reference: var(--weave-color-action);
  --accent-teal: var(--weave-color-action);
  --accent-wax: var(--weave-color-action);
  --border-subtle: var(--weave-color-rule);
  --border-active: var(--weave-color-action);
  --error-color: var(--weave-color-danger);
  --success-color: var(--weave-color-success);
  --warning-color: var(--weave-color-warning);
  --wine: var(--weave-color-action);

  --weave-canvas: var(--weave-color-canvas);
  --weave-paper: var(--weave-color-paper);
  --weave-paper-raised: var(--weave-color-paper);
  --weave-paper-soft: var(--weave-color-hover);
  --weave-paper-inset: var(--weave-color-selected);
  --weave-ink: var(--weave-color-ink);
  --weave-ink-soft: var(--weave-color-secondary);
  --weave-pine: var(--weave-color-ink);
  --weave-pine-light: var(--weave-color-secondary);
  --weave-pine-deep: var(--weave-color-ink);
  --weave-pine-black: var(--weave-color-deep-ink);
  --weave-wax: var(--weave-color-action);
  --weave-wax-light: var(--weave-color-action);
  --weave-wax-deep: var(--weave-color-action-hover);
  --weave-bronze: var(--weave-color-action);
  --weave-gold: var(--weave-color-spark);
  --weave-gold-bright: var(--weave-color-spark);
  --weave-rule: var(--weave-color-rule);
  --weave-rule-strong: var(--weave-color-rule-strong);
  --weave-muted: var(--weave-color-secondary);
  --weave-inverse: var(--weave-color-paper);
  --weave-inverse-muted: var(--weave-color-selected);
  --weave-shadow: var(--weave-shadow-overlay);
  --weave-shadow-soft: var(--weave-shadow-raised);
  --weave-shadow-float: var(--weave-shadow-overlay);

  --weave-bronze: var(--weave-color-action);
  --weave-canvas: var(--weave-color-canvas);
  --weave-gold: var(--weave-color-spark);
  --weave-gold-bright: var(--weave-color-spark);
  --weave-ink: var(--weave-color-ink);
  --weave-ink-soft: var(--weave-color-secondary);
  --weave-inverse: var(--weave-color-paper);
  --weave-inverse-muted: var(--weave-color-selected);
  --weave-muted: var(--weave-color-secondary);
  --weave-paper: var(--weave-color-paper);
  --weave-paper-inset: var(--weave-color-selected);
  --weave-paper-raised: var(--weave-color-paper);
  --weave-paper-soft: var(--weave-color-hover);
  --weave-pine: var(--weave-color-ink);
  --weave-pine-black: var(--weave-color-deep-ink);
  --weave-pine-deep: var(--weave-color-ink);
  --weave-pine-light: var(--weave-color-secondary);
  --weave-rule: var(--weave-color-rule);
  --weave-rule-strong: var(--weave-color-rule-strong);
  --weave-shadow: var(--weave-shadow-overlay);
  --weave-shadow-float: var(--weave-shadow-overlay);
  --weave-shadow-soft: var(--weave-shadow-raised);
  --weave-wax: var(--weave-color-action);
  --weave-wax-deep: var(--weave-color-action-hover);
  --weave-wax-light: var(--weave-color-action);
  --shadow-card: var(--weave-shadow-raised);
  --shadow-lg: var(--weave-shadow-overlay);

  --radius-sm: var(--weave-radius-sm);
  --radius-md: var(--weave-radius-md);
  --radius-lg: var(--weave-radius-md);

  --font-sans: var(--weave-font-ui);
  --font-serif: var(--weave-font-reading);
  --font-display: var(--weave-font-display);
  --font-mono: var(--weave-font-mono);
}