/* World Weaver design tokens — "the lamplit loom" (DECISIONS D14).
   Deep violet-ink night cloth, undyed linen text, candle-gold thread.
   Semantic roles per the style guide: color is meaning, never decoration. */

@font-face {
  font-family: "Alegreya";
  src: url("/fonts/alegreya-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("/fonts/alegreya-latin-400-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("/fonts/alegreya-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Alegreya";
  src: url("/fonts/alegreya-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("/fonts/alegreya-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("/fonts/alegreya-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Alegreya Sans";
  src: url("/fonts/alegreya-sans-latin-700-normal.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}

:root {
  /* Identity */
  --ink: #14121b;          /* night cloth — app background */
  --panel: #1d1927;        /* raised cloth — panels, cards */
  --panel-2: #262133;      /* higher surface — inputs, hover */
  --edge: #35304a;         /* woven edge — borders */
  --linen: #e8e0d0;        /* body text */
  --linen-dim: #a89f8f;    /* secondary text */
  --thread: #d4a937;       /* candle-gold — the Weaver's thread, narration, primary action */
  --thread-dim: #8f7526;
  --whisper: #9c8fd0;      /* private narration to you alone */

  /* Semantic roles (style guide section 2) */
  --success: #679a6b;
  --info: #6e8fc9;
  --warning: #c77b3a;
  --danger: #b4433a;
  --neutral: #8a8496;
  --accent-config: #c77b3a;   /* Loom / configuration surfaces share the ember family */

  /* Derived surfaces and on-colors — every raw color value lives in this file. */
  --well: rgb(0 0 0 / 0.12);              /* recessed side panes */
  --input-bg: #100e17;
  --hover: #2e2840;                       /* raised-surface hover */
  --pressed: #171420;
  --on-thread: #1a1508;                   /* text on candle-gold */
  --on-thread-dim: #3a3323;
  --thread-bright: #e0bb54;               /* gold hover */
  --on-danger: #ffffff;
  --on-success: #10160f;
  --whisper-bright: #cfc6e8;              /* private narration body */
  --backdrop: rgb(8 7 12 / 0.7);
  --thread-soft: rgb(212 169 55 / 0.55);  /* warp-thread gradient stops */
  --danger-soft: rgb(180 67 58 / 0.12);   /* quiet-danger hover fill */
  --weave-light: rgb(255 255 255 / 0.012);
  --weave-dark: rgb(0 0 0 / 0.05);

  /* Type */
  --font-body: "Alegreya", "Iowan Old Style", Georgia, serif;
  --font-ui: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;
  --font-display: "Cormorant Garamond", "Alegreya", Georgia, serif;
  --fs-0: 0.8125rem;  /* 13 chrome, captions */
  --fs-1: 0.9375rem;  /* 15 ui */
  --fs-2: 1.0625rem;  /* 17 body/story */
  --fs-3: 1.375rem;   /* 22 section */
  --fs-4: 2rem;       /* 32 screen title */
  --fs-5: 3.25rem;    /* 52 wordmark */

  /* Space and shape */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem;
  --radius: 6px;
  --radius-lg: 10px;

  /* The thread (signature) */
  --thread-w: 2px;
  --knot: 11px;
}