/*
 * Tibipedia brand tokens — SINGLE SOURCE OF TRUTH.
 *
 * Used by: Beholder Center (admin.html), ZnoteAAC website (layout/css/tibipedia-tokens.css,
 * a synced copy) and, in phase 2, the web client UI.
 * Edit ONLY this file, then run `npm run brand:sync` (copies it to ZnoteAAC).
 * Palette sampled from the official crest (brand/source/); see docs/brand/BRAND.md.
 */

/* Brand heading fonts, self-hosted (SIL OFL, brand/fonts/OFL.txt; latin subset
   from Google Fonts). URLs are relative to this file: the client serves
   brand/fonts/, and brand:sync copies them next to the website copy
   (layout/css/fonts/). */
@font-face {
  font-family: "Tibipedia Display";
  src: url("fonts/Cinzel-latin.woff2") format("woff2");
  font-weight: 400 900; /* variable font */
  font-display: swap;
}
@font-face {
  font-family: "Cinzel Decorative";
  src: url("fonts/CinzelDecorative-400-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel Decorative";
  src: url("fonts/CinzelDecorative-700-latin.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel Decorative";
  src: url("fonts/CinzelDecorative-900-latin.woff2") format("woff2");
  font-weight: 900;
  font-display: swap;
}

:root {
  color-scheme: dark;

  /* Surfaces (dungeon stone / plaque slate) */
  --brand-bg: #0c0a13;            /* crest floor 960,1160 */
  --brand-bg-deep: #07050b;       /* crest corner 100,1100 */
  --brand-surface: #120f1a;       /* stone wall 300,650 */
  --brand-surface-2: #161622;     /* plaque 420,880 */
  --brand-surface-3: #26222e;     /* arch 520,500 — hover / elevated */
  --brand-border: #2e2638;        /* badge ring 375,620 */
  --brand-border-strong: #4a4152; /* derived: border + 12% lightness */

  /* Text (parchment, derived from flame core #fffef4) */
  --brand-text: #f3eee2;
  --brand-text-soft: #d6cfc0;
  --brand-text-muted: #a8a092;    /* >= 6:1 on every surface */

  /* Accent: plaque gold */
  --brand-accent: #e0b249;        /* rivet 336,806 */
  --brand-accent-hover: #e9c973;  /* frame line 1000,806 */
  --brand-accent-strong: #9e7126; /* letter shade 1300,860 — borders/gradients only */
  --brand-accent-contrast: #0c0a13; /* text on gold buttons (9.95:1) */

  /* Semantic */
  --brand-premium: #e3911c;       /* beholder iris 935,410 (premium / level / highlight) */
  --brand-flame: #fa9c3c;         /* torch flame 290,340 */
  --brand-success: #537047;       /* beholder skin 600,200 — fills, dots */
  --brand-success-text: #8fbf78;  /* derived tint for text (9.26:1) */
  --brand-warning: #e3911c;
  --brand-warning-text: #fa9c3c;
  --brand-danger: #ea4242;        /* skull badge 400,610 — fills, dots */
  --brand-danger-text: #f27a7a;   /* derived tint for text (>= 5.8:1) */
  --brand-danger-strong: #a83232; /* derived: danger buttons with white text (6.63:1) */
  --brand-info: #38bdf8;          /* eye-stalk iris 598,40 — links / info */
  --brand-info-deep: #1e6b8f;     /* portal 960,720 */

  /* RGB triplets for translucent tints: rgb(var(--brand-accent-rgb) / .15) */
  --brand-bg-rgb: 12 10 19;
  --brand-surface-rgb: 18 15 26;
  --brand-accent-rgb: 224 178 73;
  --brand-premium-rgb: 227 145 28;
  --brand-success-rgb: 83 112 71;
  --brand-success-text-rgb: 143 191 120;
  --brand-danger-rgb: 234 66 66;
  --brand-info-rgb: 56 189 248;

  /* Typography */
  --brand-font-display: "Tibipedia Display", Cinzel, "Cinzel Decorative", "Trajan Pro", Georgia, "Times New Roman", serif;
  --brand-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --brand-font-mono: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  /* Spacing (4px scale) */
  --brand-space-1: 4px;
  --brand-space-2: 8px;
  --brand-space-3: 12px;
  --brand-space-4: 16px;
  --brand-space-5: 24px;
  --brand-space-6: 32px;

  /* Radius */
  --brand-radius-sm: 4px;
  --brand-radius-md: 8px;
  --brand-radius-lg: 14px;
  --brand-radius-pill: 999px;

  /* Shadows */
  --brand-shadow-sm: 0 1px 2px rgb(0 0 0 / .45);
  --brand-shadow-md: 0 6px 18px rgb(0 0 0 / .45);
  --brand-shadow-lg: 0 18px 45px -10px rgb(0 0 0 / .75);
  --brand-shadow-inset: inset 0 1px 0 rgb(255 255 255 / .04);
  --brand-shadow-glow: 0 0 0 3px rgb(var(--brand-accent-rgb) / .25);

  /* Gradients */
  --brand-gradient-gold: linear-gradient(180deg, #e9c973 0%, #e0b249 55%, #9e7126 100%);
  --brand-gradient-surface: linear-gradient(180deg, #161622 0%, #120f1a 100%);
}