/* Quest Log — fantasy-RPG journal.
   Aged bronze is the structural decoration (2px entry frames, corner
   brackets, ribbon banners); the interactive accent follows the user via
   the primary aliases. All eight accent ramps are retuned as heraldic
   banner dyes. Light = aged parchment journal, dark = torchlit hall. */

/* ---------------------------------------------------------------- *
 * 1. Scheme-independent tokens — (0,2,0)
 * ---------------------------------------------------------------- */

[data-theme="quest"][data-theme] {
  /* Type: Grenze for medieval-but-readable headings, Alegreya body. */
  --mantine-font-family: "Alegreya", "Iowan Old Style", Georgia, serif;
  --mantine-font-family-headings: "Grenze", "Alegreya", Georgia, serif;
  --mantine-font-size-xs: 0.8125rem;
  --mantine-font-size-sm: 0.9375rem;
  --mantine-font-size-md: 1.0625rem;
  --mantine-font-size-lg: 1.1875rem;
  --mantine-font-size-xl: 1.375rem;
  --mantine-heading-font-weight: 600;
  --mantine-h1-font-size: 2.4rem;
  --mantine-h1-line-height: 1.15;
  --mantine-h2-font-size: 1.95rem;
  --mantine-h2-line-height: 1.2;
  --mantine-h3-font-size: 1.55rem;
  --mantine-h3-line-height: 1.25;
  --mantine-h4-font-size: 1.3rem;
  --mantine-h4-line-height: 1.3;
  --mantine-h5-font-size: 1.15rem;
  --mantine-h5-line-height: 1.35;
  --mantine-h6-font-size: 1.05rem;
  --mantine-h6-line-height: 1.4;

  /* Shape: gently squared journal entries. */
  --mantine-radius-xs: 0.125rem;
  --mantine-radius-sm: 0.25rem;
  --mantine-radius-md: 0.375rem;
  --mantine-radius-lg: 0.5rem;
  --mantine-radius-xl: 0.75rem;
  --mantine-radius-default: 0.375rem;

  /* Elevation: soft warm sepia, never harsh. */
  --mantine-shadow-xs: 0 1px 2px rgba(38, 26, 10, 0.2);
  --mantine-shadow-sm: 0 1px 2px rgba(38, 26, 10, 0.22), 0 5px 14px rgba(38, 26, 10, 0.16);
  --mantine-shadow-md: 0 2px 4px rgba(38, 26, 10, 0.24), 0 10px 24px rgba(38, 26, 10, 0.2);
  --mantine-shadow-lg: 0 3px 7px rgba(38, 26, 10, 0.26), 0 18px 40px rgba(38, 26, 10, 0.24);
  --mantine-shadow-xl: 0 5px 10px rgba(38, 26, 10, 0.28), 0 26px 56px rgba(38, 26, 10, 0.28);

  /* Accent ramps retuned as heraldic banner dyes — saturated but cloth-worn;
     every shade 6 carries ≥4.5:1 parchment contrast text. */

  /* blue → azure banner */
  --mantine-color-blue-0: #eef1fa;
  --mantine-color-blue-1: #d8dff2;
  --mantine-color-blue-2: #b4c2e6;
  --mantine-color-blue-3: #8aa0d6;
  --mantine-color-blue-4: #6280c4;
  --mantine-color-blue-5: #4263ae;
  --mantine-color-blue-6: #2f4d96;
  --mantine-color-blue-7: #263e7b;
  --mantine-color-blue-8: #1d2f60;
  --mantine-color-blue-9: #152246;

  /* red → gules crimson */
  --mantine-color-red-0: #faeceb;
  --mantine-color-red-1: #f2d3d1;
  --mantine-color-red-2: #e6aba7;
  --mantine-color-red-3: #d87d78;
  --mantine-color-red-4: #c65450;
  --mantine-color-red-5: #ad322f;
  --mantine-color-red-6: #92201f;
  --mantine-color-red-7: #7a1719;
  --mantine-color-red-8: #601114;
  --mantine-color-red-9: #470c0f;

  /* green → vert */
  --mantine-color-green-0: #ebf3ec;
  --mantine-color-green-1: #d2e5d4;
  --mantine-color-green-2: #aacfae;
  --mantine-color-green-3: #7db383;
  --mantine-color-green-4: #55975d;
  --mantine-color-green-5: #35793f;
  --mantine-color-green-6: #24632e;
  --mantine-color-green-7: #1c5026;
  --mantine-color-green-8: #153e1e;
  --mantine-color-green-9: #0e2c16;

  /* yellow → or (gold leaf) */
  --mantine-color-yellow-0: #fbf3dc;
  --mantine-color-yellow-1: #f4e3b0;
  --mantine-color-yellow-2: #e9cd7c;
  --mantine-color-yellow-3: #dbb14b;
  --mantine-color-yellow-4: #c99527;
  --mantine-color-yellow-5: #ab7812;
  --mantine-color-yellow-6: #8c5f0b;
  --mantine-color-yellow-7: #714c09;
  --mantine-color-yellow-8: #583b07;
  --mantine-color-yellow-9: #402b05;

  /* grape → purpure */
  --mantine-color-grape-0: #f4edf7;
  --mantine-color-grape-1: #e5d5ec;
  --mantine-color-grape-2: #cfb2dc;
  --mantine-color-grape-3: #b389c8;
  --mantine-color-grape-4: #9663b2;
  --mantine-color-grape-5: #7a4399;
  --mantine-color-grape-6: #642e82;
  --mantine-color-grape-7: #52246b;
  --mantine-color-grape-8: #401b54;
  --mantine-color-grape-9: #2f133e;

  /* orange → tenné */
  --mantine-color-orange-0: #faeee2;
  --mantine-color-orange-1: #f3d9bd;
  --mantine-color-orange-2: #e9bc8d;
  --mantine-color-orange-3: #dd9a58;
  --mantine-color-orange-4: #cf7a2c;
  --mantine-color-orange-5: #b45e14;
  --mantine-color-orange-6: #96490d;
  --mantine-color-orange-7: #7a3a0b;
  --mantine-color-orange-8: #602d08;
  --mantine-color-orange-9: #472106;

  /* pink → rose madder */
  --mantine-color-pink-0: #f9ecf1;
  --mantine-color-pink-1: #f0d3de;
  --mantine-color-pink-2: #e3aac1;
  --mantine-color-pink-3: #d27da0;
  --mantine-color-pink-4: #bf5280;
  --mantine-color-pink-5: #a53064;
  --mantine-color-pink-6: #8a1f51;
  --mantine-color-pink-7: #711842;
  --mantine-color-pink-8: #581233;
  --mantine-color-pink-9: #400c25;

  /* lime → spring leaf */
  --mantine-color-lime-0: #f2f5e6;
  --mantine-color-lime-1: #e2e9c6;
  --mantine-color-lime-2: #cdd89e;
  --mantine-color-lime-3: #b2c26f;
  --mantine-color-lime-4: #96a944;
  --mantine-color-lime-5: #7a8d26;
  --mantine-color-lime-6: #59690f;
  --mantine-color-lime-7: #485510;
  --mantine-color-lime-8: #38420d;
  --mantine-color-lime-9: #293009;

  /* Gray ramp as parchment/sepia so gray-derived UI stays in the world. */
  --mantine-color-gray-0: #f7efdd;
  --mantine-color-gray-1: #f0e6cf;
  --mantine-color-gray-2: #e3d4b4;
  --mantine-color-gray-3: #d0bd95;
  --mantine-color-gray-4: #b5a17a;
  --mantine-color-gray-5: #92805e;
  --mantine-color-gray-6: #6a5a41;
  --mantine-color-gray-7: #4a3d2b;
  --mantine-color-gray-8: #362c1e;
  --mantine-color-gray-9: #291f14;

  /* Dark ramp as torch-lit umber. */
  --mantine-color-dark-0: #ecdfc6;
  --mantine-color-dark-1: #b3a488;
  --mantine-color-dark-2: #7a6a52;
  --mantine-color-dark-3: #55462f;
  --mantine-color-dark-4: #3b2f1f;
  --mantine-color-dark-5: #2b2318;
  --mantine-color-dark-6: #241d13;
  --mantine-color-dark-7: #1c160e;
  --mantine-color-dark-8: #15100a;
  --mantine-color-dark-9: #0e0a06;

  --flxn-avatar-radius: 50%; /* party-member portraits */
  --flxn-avatar-border: 2px solid var(--quest-frame);
  --flxn-badge-radius: 8px;
}

/* ---------------------------------------------------------------- *
 * 2. Per-scheme tokens — (0,3,0)
 * ---------------------------------------------------------------- */

[data-theme="quest"][data-theme][data-mantine-color-scheme="light"] {
  --mantine-color-body: #f0e6cf;
  --mantine-color-text: #2f2414;
  --mantine-color-bright: #1d1509;
  --mantine-color-dimmed: #6a5a41;
  --mantine-color-placeholder: #83704f;
  --mantine-color-anchor: var(--mantine-primary-color-7);
  --mantine-color-error: #9e2b20;
  --mantine-color-default: #f7efdd;
  --mantine-color-default-hover: #efe3c8;
  --mantine-color-default-color: #2f2414;
  --mantine-color-default-border: #b39a6b;

  /* Accent variant vars re-derived from the retuned ramps (Mantine's
     defaults are literal rgba of its stock hues). */
  --mantine-color-blue-light: color-mix(in srgb, var(--mantine-color-blue-6) 10%, transparent);
  --mantine-color-blue-light-hover: color-mix(in srgb, var(--mantine-color-blue-6) 16%, transparent);
  --mantine-color-blue-light-color: var(--mantine-color-blue-7);
  --mantine-color-blue-outline: var(--mantine-color-blue-6);
  --mantine-color-blue-outline-hover: color-mix(in srgb, var(--mantine-color-blue-6) 8%, transparent);
  --mantine-color-blue-text: var(--mantine-color-blue-7);
  --mantine-color-blue-contrast: #f6ecd8;
  --mantine-color-red-light: color-mix(in srgb, var(--mantine-color-red-6) 10%, transparent);
  --mantine-color-red-light-hover: color-mix(in srgb, var(--mantine-color-red-6) 16%, transparent);
  --mantine-color-red-light-color: var(--mantine-color-red-7);
  --mantine-color-red-outline: var(--mantine-color-red-6);
  --mantine-color-red-outline-hover: color-mix(in srgb, var(--mantine-color-red-6) 8%, transparent);
  --mantine-color-red-text: var(--mantine-color-red-7);
  --mantine-color-red-contrast: #f6ecd8;
  --mantine-color-green-light: color-mix(in srgb, var(--mantine-color-green-6) 10%, transparent);
  --mantine-color-green-light-hover: color-mix(in srgb, var(--mantine-color-green-6) 16%, transparent);
  --mantine-color-green-light-color: var(--mantine-color-green-7);
  --mantine-color-green-outline: var(--mantine-color-green-6);
  --mantine-color-green-outline-hover: color-mix(in srgb, var(--mantine-color-green-6) 8%, transparent);
  --mantine-color-green-text: var(--mantine-color-green-7);
  --mantine-color-green-contrast: #f6ecd8;
  --mantine-color-yellow-light: color-mix(in srgb, var(--mantine-color-yellow-6) 10%, transparent);
  --mantine-color-yellow-light-hover: color-mix(in srgb, var(--mantine-color-yellow-6) 16%, transparent);
  --mantine-color-yellow-light-color: var(--mantine-color-yellow-7);
  --mantine-color-yellow-outline: var(--mantine-color-yellow-6);
  --mantine-color-yellow-outline-hover: color-mix(in srgb, var(--mantine-color-yellow-6) 8%, transparent);
  --mantine-color-yellow-text: var(--mantine-color-yellow-7);
  --mantine-color-yellow-contrast: #f6ecd8;
  --mantine-color-grape-light: color-mix(in srgb, var(--mantine-color-grape-6) 10%, transparent);
  --mantine-color-grape-light-hover: color-mix(in srgb, var(--mantine-color-grape-6) 16%, transparent);
  --mantine-color-grape-light-color: var(--mantine-color-grape-7);
  --mantine-color-grape-outline: var(--mantine-color-grape-6);
  --mantine-color-grape-outline-hover: color-mix(in srgb, var(--mantine-color-grape-6) 8%, transparent);
  --mantine-color-grape-text: var(--mantine-color-grape-7);
  --mantine-color-grape-contrast: #f6ecd8;
  --mantine-color-orange-light: color-mix(in srgb, var(--mantine-color-orange-6) 10%, transparent);
  --mantine-color-orange-light-hover: color-mix(in srgb, var(--mantine-color-orange-6) 16%, transparent);
  --mantine-color-orange-light-color: var(--mantine-color-orange-7);
  --mantine-color-orange-outline: var(--mantine-color-orange-6);
  --mantine-color-orange-outline-hover: color-mix(in srgb, var(--mantine-color-orange-6) 8%, transparent);
  --mantine-color-orange-text: var(--mantine-color-orange-7);
  --mantine-color-orange-contrast: #f6ecd8;
  --mantine-color-pink-light: color-mix(in srgb, var(--mantine-color-pink-6) 10%, transparent);
  --mantine-color-pink-light-hover: color-mix(in srgb, var(--mantine-color-pink-6) 16%, transparent);
  --mantine-color-pink-light-color: var(--mantine-color-pink-7);
  --mantine-color-pink-outline: var(--mantine-color-pink-6);
  --mantine-color-pink-outline-hover: color-mix(in srgb, var(--mantine-color-pink-6) 8%, transparent);
  --mantine-color-pink-text: var(--mantine-color-pink-7);
  --mantine-color-pink-contrast: #f6ecd8;
  --mantine-color-lime-light: color-mix(in srgb, var(--mantine-color-lime-6) 10%, transparent);
  --mantine-color-lime-light-hover: color-mix(in srgb, var(--mantine-color-lime-6) 16%, transparent);
  --mantine-color-lime-light-color: var(--mantine-color-lime-7);
  --mantine-color-lime-outline: var(--mantine-color-lime-6);
  --mantine-color-lime-outline-hover: color-mix(in srgb, var(--mantine-color-lime-6) 8%, transparent);
  --mantine-color-lime-text: var(--mantine-color-lime-7);
  --mantine-color-lime-contrast: #f6ecd8;
  --mantine-color-gray-light: color-mix(in srgb, var(--mantine-color-gray-6) 10%, transparent);
  --mantine-color-gray-light-hover: color-mix(in srgb, var(--mantine-color-gray-6) 15%, transparent);
  --mantine-color-gray-light-color: var(--mantine-color-gray-7);

  /* Theme-local palette. */
  --quest-frame: #a3854f;
  --quest-corner: #8a6a3a;
  --quest-bronze: #7c5f2c;
  --quest-surface: #f7efdd;
  --quest-recessed: #e7d8b6;
  --quest-shell: #ece0c3;
  --quest-tick: rgba(90, 66, 30, 0.22);
  --quest-ribbon-hi: #8d6c38;
  --quest-ribbon: #7a5c2e;
  --quest-ribbon-lo: #5f4620;
  --quest-ribbon-ink: #f7eedb;

  /* App tokens: guild-board accolades on parchment. */
  --flxn-gold: #7d5c12;
  --flxn-silver: #776e5c;
  --flxn-bronze: #8a4f22;
  --flxn-toast-success: #45702c;
  --flxn-toast-error: #9e2b20;
  --flxn-podium-1-bg: color-mix(in srgb, #c99527 15%, #f7efdd);
  --flxn-podium-1-border: color-mix(in srgb, #7d5c12 55%, #d0bd95);
  --flxn-podium-1-label: #6f5116;
  --flxn-podium-2-bg: color-mix(in srgb, #92805e 10%, #f7efdd);
  --flxn-podium-2-border: #b5a17a;
  --flxn-podium-2-label: #6a5a41;
  --flxn-podium-3-bg: color-mix(in srgb, #8a4f22 12%, #f7efdd);
  --flxn-podium-3-border: color-mix(in srgb, #8a4f22 45%, #d0bd95);
  --flxn-podium-3-label: #74431c;
  --flxn-showcase-bg: #f7efdd;
  --flxn-overlay: rgba(35, 24, 10, 0.45);
  --flxn-dotgrid-color: rgba(138, 106, 58, 0.25);
  --flxn-pop-shadow: rgba(46, 32, 12, 0.3);
}

[data-theme="quest"][data-theme][data-mantine-color-scheme="dark"] {
  --mantine-color-body: #211a12;
  --mantine-color-text: #ecdfc6;
  --mantine-color-bright: #f7efdd;
  --mantine-color-dimmed: #a5937a;
  --mantine-color-placeholder: #837259;
  --mantine-color-anchor: var(--mantine-primary-color-2);
  --mantine-color-error: #d4736a;
  --mantine-color-default: #2b2216;
  --mantine-color-default-hover: #342a1b;
  --mantine-color-default-color: #ecdfc6;
  --mantine-color-default-border: #5c4a2c;

  /* Filled stays mid-ramp: shade-8 dye vanishes in the torchlit hall. */
  --mantine-color-blue-filled: var(--mantine-color-blue-6);
  --mantine-color-blue-filled-hover: var(--mantine-color-blue-5);
  --mantine-color-blue-light: color-mix(in srgb, var(--mantine-color-blue-4) 15%, transparent);
  --mantine-color-blue-light-hover: color-mix(in srgb, var(--mantine-color-blue-4) 22%, transparent);
  --mantine-color-blue-light-color: var(--mantine-color-blue-2);
  --mantine-color-blue-outline: var(--mantine-color-blue-3);
  --mantine-color-blue-outline-hover: color-mix(in srgb, var(--mantine-color-blue-3) 12%, transparent);
  --mantine-color-blue-text: var(--mantine-color-blue-3);
  --mantine-color-blue-contrast: #f6ecd8;
  --mantine-color-red-filled: var(--mantine-color-red-6);
  --mantine-color-red-filled-hover: var(--mantine-color-red-5);
  --mantine-color-red-light: color-mix(in srgb, var(--mantine-color-red-4) 15%, transparent);
  --mantine-color-red-light-hover: color-mix(in srgb, var(--mantine-color-red-4) 22%, transparent);
  --mantine-color-red-light-color: var(--mantine-color-red-2);
  --mantine-color-red-outline: var(--mantine-color-red-3);
  --mantine-color-red-outline-hover: color-mix(in srgb, var(--mantine-color-red-3) 12%, transparent);
  --mantine-color-red-text: var(--mantine-color-red-3);
  --mantine-color-red-contrast: #f6ecd8;
  --mantine-color-green-filled: var(--mantine-color-green-6);
  --mantine-color-green-filled-hover: var(--mantine-color-green-5);
  --mantine-color-green-light: color-mix(in srgb, var(--mantine-color-green-4) 15%, transparent);
  --mantine-color-green-light-hover: color-mix(in srgb, var(--mantine-color-green-4) 22%, transparent);
  --mantine-color-green-light-color: var(--mantine-color-green-2);
  --mantine-color-green-outline: var(--mantine-color-green-3);
  --mantine-color-green-outline-hover: color-mix(in srgb, var(--mantine-color-green-3) 12%, transparent);
  --mantine-color-green-text: var(--mantine-color-green-3);
  --mantine-color-green-contrast: #f6ecd8;
  --mantine-color-yellow-filled: var(--mantine-color-yellow-6);
  --mantine-color-yellow-filled-hover: var(--mantine-color-yellow-5);
  --mantine-color-yellow-light: color-mix(in srgb, var(--mantine-color-yellow-4) 15%, transparent);
  --mantine-color-yellow-light-hover: color-mix(in srgb, var(--mantine-color-yellow-4) 22%, transparent);
  --mantine-color-yellow-light-color: var(--mantine-color-yellow-2);
  --mantine-color-yellow-outline: var(--mantine-color-yellow-3);
  --mantine-color-yellow-outline-hover: color-mix(in srgb, var(--mantine-color-yellow-3) 12%, transparent);
  --mantine-color-yellow-text: var(--mantine-color-yellow-3);
  --mantine-color-yellow-contrast: #f6ecd8;
  --mantine-color-grape-filled: var(--mantine-color-grape-6);
  --mantine-color-grape-filled-hover: var(--mantine-color-grape-5);
  --mantine-color-grape-light: color-mix(in srgb, var(--mantine-color-grape-4) 15%, transparent);
  --mantine-color-grape-light-hover: color-mix(in srgb, var(--mantine-color-grape-4) 22%, transparent);
  --mantine-color-grape-light-color: var(--mantine-color-grape-2);
  --mantine-color-grape-outline: var(--mantine-color-grape-3);
  --mantine-color-grape-outline-hover: color-mix(in srgb, var(--mantine-color-grape-3) 12%, transparent);
  --mantine-color-grape-text: var(--mantine-color-grape-3);
  --mantine-color-grape-contrast: #f6ecd8;
  --mantine-color-orange-filled: var(--mantine-color-orange-6);
  --mantine-color-orange-filled-hover: var(--mantine-color-orange-5);
  --mantine-color-orange-light: color-mix(in srgb, var(--mantine-color-orange-4) 15%, transparent);
  --mantine-color-orange-light-hover: color-mix(in srgb, var(--mantine-color-orange-4) 22%, transparent);
  --mantine-color-orange-light-color: var(--mantine-color-orange-2);
  --mantine-color-orange-outline: var(--mantine-color-orange-3);
  --mantine-color-orange-outline-hover: color-mix(in srgb, var(--mantine-color-orange-3) 12%, transparent);
  --mantine-color-orange-text: var(--mantine-color-orange-3);
  --mantine-color-orange-contrast: #f6ecd8;
  --mantine-color-pink-filled: var(--mantine-color-pink-6);
  --mantine-color-pink-filled-hover: var(--mantine-color-pink-5);
  --mantine-color-pink-light: color-mix(in srgb, var(--mantine-color-pink-4) 15%, transparent);
  --mantine-color-pink-light-hover: color-mix(in srgb, var(--mantine-color-pink-4) 22%, transparent);
  --mantine-color-pink-light-color: var(--mantine-color-pink-2);
  --mantine-color-pink-outline: var(--mantine-color-pink-3);
  --mantine-color-pink-outline-hover: color-mix(in srgb, var(--mantine-color-pink-3) 12%, transparent);
  --mantine-color-pink-text: var(--mantine-color-pink-3);
  --mantine-color-pink-contrast: #f6ecd8;
  --mantine-color-lime-filled: var(--mantine-color-lime-6);
  --mantine-color-lime-filled-hover: var(--mantine-color-lime-5);
  --mantine-color-lime-light: color-mix(in srgb, var(--mantine-color-lime-4) 15%, transparent);
  --mantine-color-lime-light-hover: color-mix(in srgb, var(--mantine-color-lime-4) 22%, transparent);
  --mantine-color-lime-light-color: var(--mantine-color-lime-2);
  --mantine-color-lime-outline: var(--mantine-color-lime-3);
  --mantine-color-lime-outline-hover: color-mix(in srgb, var(--mantine-color-lime-3) 12%, transparent);
  --mantine-color-lime-text: var(--mantine-color-lime-3);
  --mantine-color-lime-contrast: #f6ecd8;
  --mantine-color-gray-light: color-mix(in srgb, var(--mantine-color-gray-5) 12%, transparent);
  --mantine-color-gray-light-hover: color-mix(in srgb, var(--mantine-color-gray-5) 18%, transparent);
  --mantine-color-gray-light-color: var(--mantine-color-gray-2);

  /* Theme-local palette: ember-warm parchment panels in a torchlit hall. */
  --quest-frame: #7a6136;
  --quest-corner: #c49a5e;
  --quest-bronze: #cfa768;
  --quest-surface: #2b2216;
  --quest-recessed: #171208;
  --quest-shell: #1a140c;
  --quest-tick: rgba(0, 0, 0, 0.4);
  --quest-ribbon-hi: #d8b077;
  --quest-ribbon: #c49a5e;
  --quest-ribbon-lo: #a97f45;
  --quest-ribbon-ink: #241a0c;

  --flxn-gold: #d9b36b;
  --flxn-silver: #a89f90;
  --flxn-bronze: #c08050;
  --flxn-toast-success: #a8bd85;
  --flxn-toast-error: #dc9a90;
  --flxn-podium-1-bg: color-mix(in srgb, #c99527 14%, #2b2216);
  --flxn-podium-1-border: color-mix(in srgb, #d9b36b 45%, #3b2f1f);
  --flxn-podium-1-label: #d9b36b;
  --flxn-podium-2-bg: color-mix(in srgb, #a89f90 9%, #2b2216);
  --flxn-podium-2-border: color-mix(in srgb, #a89f90 32%, #3b2f1f);
  --flxn-podium-2-label: #b5aea1;
  --flxn-podium-3-bg: color-mix(in srgb, #c08050 12%, #2b2216);
  --flxn-podium-3-border: color-mix(in srgb, #c08050 42%, #3b2f1f);
  --flxn-podium-3-label: #cd8f61;
  --flxn-showcase-bg: #2b2216;
  --flxn-overlay: rgba(8, 5, 2, 0.6);
  --flxn-dotgrid-color: rgba(196, 154, 94, 0.18);
  --flxn-pop-shadow: rgba(0, 0, 0, 0.55);
}

/* ---------------------------------------------------------------- *
 * 3. Full-page decoration: worn parchment edges / torchlight
 * ---------------------------------------------------------------- */

[data-theme="quest"][data-mantine-color-scheme="light"] .flxn-theme-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background:
    radial-gradient(140% 100% at 50% 32%, transparent 58%, rgba(122, 91, 42, 0.1) 88%, rgba(96, 69, 28, 0.2) 100%),
    radial-gradient(55% 38% at 6% 2%, rgba(122, 91, 42, 0.07), transparent 70%),
    radial-gradient(55% 38% at 95% 98%, rgba(122, 91, 42, 0.07), transparent 70%);
}

[data-theme="quest"][data-mantine-color-scheme="dark"] .flxn-theme-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(214, 158, 84, 0.07), transparent 70%),
    radial-gradient(130% 95% at 50% 45%, transparent 55%, rgba(5, 3, 1, 0.5) 100%);
}

/* ---------------------------------------------------------------- *
 * 4. Quest entries: 2px bronze frames + ornate corner brackets
 * ---------------------------------------------------------------- */

[data-theme="quest"] .mantine-Paper-root[data-with-border],
[data-theme="quest"] .mantine-Card-root,
[data-theme="quest"] .mantine-Modal-content,
[data-theme="quest"] .flxn-tile,
[data-theme="quest"] .flxn-match-card {
  position: relative;
  background-color: var(--quest-surface);
  border: 2px solid var(--quest-frame);
}

/* One pseudo paints all four L-shaped brackets (2 strips per corner). */
[data-theme="quest"] .mantine-Paper-root[data-with-border]::before,
[data-theme="quest"] .mantine-Card-root::before,
[data-theme="quest"] .mantine-Modal-content::before,
[data-theme="quest"] .flxn-tile::before,
[data-theme="quest"] .flxn-match-card::before {
  content: "";
  position: absolute;
  inset: 3px;
  pointer-events: none;
  background-image:
    linear-gradient(var(--quest-corner), var(--quest-corner)),
    linear-gradient(var(--quest-corner), var(--quest-corner)),
    linear-gradient(var(--quest-corner), var(--quest-corner)),
    linear-gradient(var(--quest-corner), var(--quest-corner)),
    linear-gradient(var(--quest-corner), var(--quest-corner)),
    linear-gradient(var(--quest-corner), var(--quest-corner)),
    linear-gradient(var(--quest-corner), var(--quest-corner)),
    linear-gradient(var(--quest-corner), var(--quest-corner));
  background-repeat: no-repeat;
  background-size:
    12px 2px, 2px 12px,
    12px 2px, 2px 12px,
    12px 2px, 2px 12px,
    12px 2px, 2px 12px;
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
}

/* ---------------------------------------------------------------- *
 * 5. Component restyles
 * ---------------------------------------------------------------- */

/* Headings: Grenze; section headers (h3/h4) ride ribbon banners. */
[data-theme="quest"] .mantine-Title-root {
  letter-spacing: 0.01em;
}
[data-theme="quest"] h3.mantine-Title-root,
[data-theme="quest"] h4.mantine-Title-root {
  width: fit-content;
  max-width: 100%;
  padding: 0.12em 1.1em 0.18em;
  background-image: linear-gradient(
    180deg,
    var(--quest-ribbon-hi) 0%,
    var(--quest-ribbon) 55%,
    var(--quest-ribbon-lo) 100%
  );
  color: var(--quest-ribbon-ink);
  clip-path: polygon(
    0 0,
    100% 0,
    calc(100% - 0.55em) 50%,
    100% 100%,
    0 100%,
    0.55em 50%
  );
}

/* Buttons: banner-dye solids in the user's accent; bronze-ruled defaults. */
[data-theme="quest"] .mantine-Button-root {
  font-weight: 600;
  letter-spacing: 0.02em;
}
[data-theme="quest"] .mantine-Button-root[data-variant="filled"],
[data-theme="quest"] .mantine-ActionIcon-root[data-variant="filled"] {
  border: 1px solid color-mix(in srgb, var(--mantine-primary-color-filled) 55%, black);
  box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.2), 0 1px 3px var(--flxn-pop-shadow);
}
[data-theme="quest"] .mantine-Button-root[data-variant="default"],
[data-theme="quest"] .mantine-ActionIcon-root[data-variant="default"] {
  border-color: var(--quest-frame);
  background-color: var(--quest-surface);
}

/* Inputs: recessed ledger lines; focus follows the accent. */
[data-theme="quest"] .mantine-Input-input {
  background-color: var(--quest-recessed);
  border-color: var(--quest-frame);
}
[data-theme="quest"] .mantine-PinInput-input {
  background-color: var(--quest-recessed);
}

/* Mantine Tabs: illuminated active label under a bronze rule. */
[data-theme="quest"] .mantine-Tabs-tab {
  letter-spacing: 0.02em;
}
[data-theme="quest"] .mantine-Tabs-tab[data-active] {
  border-color: var(--quest-corner);
  color: var(--mantine-primary-color-light-color);
}

/* Nav: active entries follow the accent — wash plus a marginal rule. */
[data-theme="quest"] .mantine-NavLink-root[data-active] {
  background-color: var(--mantine-primary-color-light);
  color: var(--mantine-primary-color-light-color);
  box-shadow: inset 3px 0 0 var(--mantine-primary-color-filled);
}
[data-theme="quest"] .mantine-NavLink-root[data-active]:hover {
  background-color: var(--mantine-primary-color-light-hover);
}

/* Shell: the journal's leather binding. */
[data-theme="quest"] .mantine-AppShell-header {
  background-color: var(--quest-shell);
  border-bottom: 1px solid var(--quest-frame);
}
[data-theme="quest"] .mantine-AppShell-navbar {
  background-color: var(--quest-shell);
  border-color: var(--quest-frame);
}

/* Segmented control: carved channel with a parchment slider. */
[data-theme="quest"] .mantine-SegmentedControl-root {
  background-color: var(--quest-recessed);
  border: 1px solid var(--quest-frame);
}
[data-theme="quest"] .mantine-SegmentedControl-indicator {
  background-color: var(--quest-surface);
  border: 1px solid var(--quest-frame);
  box-shadow: 0 1px 3px var(--flxn-pop-shadow);
}

/* Progress: XP bars — framed groove, segment ticks, glossed accent fill. */
[data-theme="quest"] .mantine-Progress-root {
  position: relative;
  background-color: var(--quest-recessed);
  border: 1px solid var(--quest-frame);
  box-shadow: inset 0 1px 2px rgba(20, 12, 4, 0.3);
}
[data-theme="quest"] .mantine-Progress-root::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent 11px,
    var(--quest-tick) 11px,
    var(--quest-tick) 12px
  );
}
[data-theme="quest"] .mantine-Progress-section {
  background-image: linear-gradient(
    180deg,
    rgba(255, 246, 224, 0.32) 0%,
    rgba(255, 246, 224, 0.06) 45%,
    rgba(24, 14, 4, 0.14) 100%
  );
}

/* Badges: embossed wax/metal seals; filled keeps a legible on-color. */
[data-theme="quest"] .mantine-Badge-root {
  font-weight: 700;
  letter-spacing: 0.05em;
  border: 1px solid rgba(24, 14, 4, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 250, 235, 0.28),
    inset 0 -1px 0 rgba(24, 14, 4, 0.18), 0 1px 2px var(--flxn-pop-shadow);
}
[data-theme="quest"] .mantine-Badge-root[data-variant="filled"],
[data-theme="quest"] .mantine-Badge-root:not([data-variant]),
[data-theme="quest"] .mantine-ThemeIcon-root[data-variant="filled"],
[data-theme="quest"] .mantine-ThemeIcon-root:not([data-variant]) {
  color: var(--mantine-primary-color-contrast);
}
[data-theme="quest"] .mantine-Checkbox-root {
  --checkbox-icon-color: var(--mantine-primary-color-contrast);
}

/* Dividers: bronze rule with a compass-star waypoint. */
[data-theme="quest"] .mantine-Divider-root {
  --divider-color: color-mix(in srgb, var(--quest-frame) 60%, transparent);
}
[data-theme="quest"] .mantine-Divider-root[data-orientation="horizontal"]:not([data-with-label]) {
  position: relative;
  overflow: visible;
}
[data-theme="quest"] .mantine-Divider-root[data-orientation="horizontal"]:not([data-with-label])::before {
  content: "\2726"; /* ✦ */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 0.5em;
  background-color: var(--mantine-color-body);
  color: var(--quest-bronze);
  font-size: 0.7rem;
  line-height: 1;
}
[data-theme="quest"] .mantine-Divider-label {
  color: var(--quest-bronze);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--mantine-font-size-xs);
}

/* Overlays: sealed notes. Popovers get a single bronze rule (the corner
   brackets are reserved for full entries; Modal-content has them above). */
[data-theme="quest"] .mantine-Popover-dropdown {
  background-color: var(--quest-surface);
  border: 1px solid var(--quest-frame);
}
[data-theme="quest"] .mantine-Modal-header {
  background-color: var(--quest-surface);
}
[data-theme="quest"] .mantine-Tooltip-tooltip {
  background-color: #1c160e;
  color: #ecdfc6;
  border: 1px solid var(--quest-frame);
}

/* Notifications: dispatched scrolls. */
[data-theme="quest"] .mantine-Notification-root {
  background-color: var(--quest-surface);
  border: 1px solid var(--quest-frame);
  box-shadow: var(--mantine-shadow-md);
}

/* Alerts keep a real border for forced-colors resilience. */
[data-theme="quest"] .mantine-Alert-root {
  border: 1px solid var(--quest-frame);
}

[data-theme="quest"][data-mantine-color-scheme="light"] .mantine-Skeleton-root::after {
  background-color: #e3d3ae;
}

/* ---------------------------------------------------------------- *
 * 6. App component hooks
 * ---------------------------------------------------------------- */

/* Tab strip: flat chapter tabs resting; docked = binding strip with a
   bronze rule. Underline indicator, so accent text on the tab is fine. */
[data-theme="quest"] .flxn-tabs[data-stuck] {
  background-color: var(--quest-shell);
  border-bottom-color: var(--quest-frame);
}
[data-theme="quest"] .flxn-tab {
  color: var(--mantine-color-dimmed);
  letter-spacing: 0.02em;
}
[data-theme="quest"] .flxn-tab[data-active] {
  color: var(--mantine-primary-color-light-color);
  font-weight: 700;
}
[data-theme="quest"] .flxn-tabs-indicator {
  border-bottom: 3px solid var(--mantine-primary-color-filled);
  padding-inline: 0.5rem;
}

/* Nav grid tiles: quest entries (frame + brackets set in section 4);
   glyphs stay FLAT — bronze-inked tint only. */
[data-theme="quest"] .flxn-tile-icon {
  color: var(--quest-bronze);
}

/* "See all": wax-seal-tabbed chip — parchment chip, accent seal dot,
   accent ink on a neutral backing. */
[data-theme="quest"] .flxn-see-all {
  background-color: var(--quest-surface);
  border: 1px solid var(--quest-frame);
  color: var(--mantine-primary-color-light-color);
  font-weight: 600;
}
[data-theme="quest"] .flxn-see-all::before {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-right: 0.45em;
  border-radius: 50%;
  vertical-align: baseline;
  background-image: radial-gradient(
    circle at 35% 30%,
    color-mix(in srgb, var(--mantine-primary-color-filled) 55%, white) 0%,
    var(--mantine-primary-color-filled) 45%,
    color-mix(in srgb, var(--mantine-primary-color-filled) 55%, black) 100%
  );
  box-shadow: 0 1px 1px var(--flxn-pop-shadow);
}
@media (hover: hover) {
  [data-theme="quest"] .flxn-see-all:hover {
    background-color: var(--mantine-primary-color-light);
    text-decoration: none;
  }
}

/* Match card + reaction tray: the entry and its reward line share one
   frame — same 2px bronze border, tray on deeper parchment. */
[data-theme="quest"] .flxn-reaction-row {
  background-color: var(--quest-recessed);
  border: 2px solid var(--quest-frame);
}

/* Badge tiles: seal-stamped keepsakes. */
[data-theme="quest"] .flxn-badge-tile {
  box-shadow: var(--mantine-shadow-xs);
}

/* Avatars: party-member portrait medallions (ring via --flxn-avatar-*). */
[data-theme="quest"] .flxn-avatar-frame {
  box-shadow: 0 1px 2px var(--flxn-pop-shadow);
}