/* Dark Academia — candlelit library gothic.
   Antique brass #b08d57 is the structural decoration (double borders, rules,
   fleurons); the interactive accent follows the user via the primary aliases.
   All eight accent ramps are retuned as heraldic manuscript pigments. */

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

[data-theme="gothic"][data-theme] {
  /* Type: Garamond has a small x-height — sizes are bumped to compensate. */
  --mantine-font-family: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --mantine-font-family-headings: "Cormorant Garamond", "EB Garamond", 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.6rem;
  --mantine-h1-line-height: 1.15;
  --mantine-h2-font-size: 2.1rem;
  --mantine-h2-line-height: 1.2;
  --mantine-h3-font-size: 1.65rem;
  --mantine-h3-line-height: 1.25;
  --mantine-h4-font-size: 1.35rem;
  --mantine-h4-line-height: 1.3;
  --mantine-h5-font-size: 1.175rem;
  --mantine-h5-line-height: 1.35;
  --mantine-h6-font-size: 1.05rem;
  --mantine-h6-line-height: 1.4;

  /* Shape: near-square, engraved rather than rounded. */
  --mantine-radius-xs: 0;
  --mantine-radius-sm: 0.0625rem;
  --mantine-radius-md: 0.125rem;
  --mantine-radius-lg: 0.125rem;
  --mantine-radius-xl: 0.125rem;
  --mantine-radius-default: 0.125rem;

  /* Elevation: deep, soft, black — never bright. */
  --mantine-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.45);
  --mantine-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5), 0 6px 16px rgba(0, 0, 0, 0.35);
  --mantine-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.5), 0 12px 28px rgba(0, 0, 0, 0.4);
  --mantine-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.5), 0 20px 44px rgba(0, 0, 0, 0.45);
  --mantine-shadow-xl: 0 6px 12px rgba(0, 0, 0, 0.55), 0 28px 64px rgba(0, 0, 0, 0.5);

  /* Accent ramps retuned as heraldic manuscript pigments — muted and
     ink-saturated; every shade 6 carries parchment contrast text. */

  /* blue → lapis lazuli */
  --mantine-color-blue-0: #edeff7;
  --mantine-color-blue-1: #d7dcee;
  --mantine-color-blue-2: #b6bede;
  --mantine-color-blue-3: #8e9ac9;
  --mantine-color-blue-4: #6879b1;
  --mantine-color-blue-5: #4a5b97;
  --mantine-color-blue-6: #374a80;
  --mantine-color-blue-7: #2c3b69;
  --mantine-color-blue-8: #222d52;
  --mantine-color-blue-9: #18213c;

  /* red → oxblood */
  --mantine-color-red-0: #f9ecea;
  --mantine-color-red-1: #f0d5d3;
  --mantine-color-red-2: #e2b0ad;
  --mantine-color-red-3: #d18a86;
  --mantine-color-red-4: #bd5f5c;
  --mantine-color-red-5: #a53a3f;
  --mantine-color-red-6: #8a1c2b;
  --mantine-color-red-7: #741522;
  --mantine-color-red-8: #5e101b;
  --mantine-color-red-9: #470b14;

  /* green → forest */
  --mantine-color-green-0: #ecf1ea;
  --mantine-color-green-1: #d4e1d1;
  --mantine-color-green-2: #b2c9af;
  --mantine-color-green-3: #8aac88;
  --mantine-color-green-4: #628e62;
  --mantine-color-green-5: #427245;
  --mantine-color-green-6: #2f5b35;
  --mantine-color-green-7: #25492b;
  --mantine-color-green-8: #1c3821;
  --mantine-color-green-9: #132818;

  /* yellow → gilded gold leaf */
  --mantine-color-yellow-0: #faf3df;
  --mantine-color-yellow-1: #f1e3ba;
  --mantine-color-yellow-2: #e5cd8c;
  --mantine-color-yellow-3: #d5b05c;
  --mantine-color-yellow-4: #c1963a;
  --mantine-color-yellow-5: #a87a1a;
  --mantine-color-yellow-6: #8a600f;
  --mantine-color-yellow-7: #6f4d0c;
  --mantine-color-yellow-8: #573c0a;
  --mantine-color-yellow-9: #402c07;

  /* grape → royal purple */
  --mantine-color-grape-0: #f2edf5;
  --mantine-color-grape-1: #e1d6e9;
  --mantine-color-grape-2: #c8b4d6;
  --mantine-color-grape-3: #a98bbd;
  --mantine-color-grape-4: #8965a3;
  --mantine-color-grape-5: #6e4789;
  --mantine-color-grape-6: #593272;
  --mantine-color-grape-7: #48285d;
  --mantine-color-grape-8: #381e49;
  --mantine-color-grape-9: #291636;

  /* orange → burnt amber */
  --mantine-color-orange-0: #f9efe3;
  --mantine-color-orange-1: #f1dcc0;
  --mantine-color-orange-2: #e6c192;
  --mantine-color-orange-3: #dc9d5c;
  --mantine-color-orange-4: #cd7c33;
  --mantine-color-orange-5: #b95f18;
  --mantine-color-orange-6: #9c4a10;
  --mantine-color-orange-7: #7e3c0d;
  --mantine-color-orange-8: #62300b;
  --mantine-color-orange-9: #482407;

  /* pink → rose madder */
  --mantine-color-pink-0: #f8edf0;
  --mantine-color-pink-1: #efd6dc;
  --mantine-color-pink-2: #e2b3c0;
  --mantine-color-pink-3: #d18b9e;
  --mantine-color-pink-4: #bc637e;
  --mantine-color-pink-5: #a34463;
  --mantine-color-pink-6: #882f4e;
  --mantine-color-pink-7: #712540;
  --mantine-color-pink-8: #591c32;
  --mantine-color-pink-9: #421425;

  /* lime → sage */
  --mantine-color-lime-0: #f0f2ea;
  --mantine-color-lime-1: #dfe3d0;
  --mantine-color-lime-2: #c8cdae;
  --mantine-color-lime-3: #aab187;
  --mantine-color-lime-4: #8c9465;
  --mantine-color-lime-5: #707a48;
  --mantine-color-lime-6: #5a6337;
  --mantine-color-lime-7: #48502c;
  --mantine-color-lime-8: #373d22;
  --mantine-color-lime-9: #292d19;

  /* Gray ramp as parchment/ink so grey-derived UI stays in the world. */
  --mantine-color-gray-0: #f6efe0;
  --mantine-color-gray-1: #efe6d5;
  --mantine-color-gray-2: #e2d5bc;
  --mantine-color-gray-3: #cfc0a4;
  --mantine-color-gray-4: #b3a487;
  --mantine-color-gray-5: #8f8069;
  --mantine-color-gray-6: #6b5d4b;
  --mantine-color-gray-7: #4a3f33;
  --mantine-color-gray-8: #352c23;
  --mantine-color-gray-9: #2b2118;

  /* Dark ramp as ink-black with a violet-umber cast. */
  --mantine-color-dark-0: #e8e0d0;
  --mantine-color-dark-1: #a89a8a;
  --mantine-color-dark-2: #6e5f68;
  --mantine-color-dark-3: #4a3e4a;
  --mantine-color-dark-4: #322833;
  --mantine-color-dark-5: #241c26;
  --mantine-color-dark-6: #1a141c;
  --mantine-color-dark-7: #141016;
  --mantine-color-dark-8: #0e0b10;
  --mantine-color-dark-9: #0a0709;

  --flxn-pop-shadow: rgba(0, 0, 0, 0.55);
  --flxn-avatar-radius: 50%; /* portrait miniatures */
  --flxn-avatar-border: 1px solid var(--gothic-brass-faint);
  --flxn-badge-radius: 2px;
}

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

[data-theme="gothic"][data-theme][data-mantine-color-scheme="dark"] {
  --mantine-color-body: #0e0b10;
  --mantine-color-text: #e8e0d0;
  --mantine-color-bright: #f6efe0;
  --mantine-color-dimmed: #a89a82;
  --mantine-color-placeholder: #7d7264;
  --mantine-color-anchor: var(--mantine-primary-color-2);
  --mantine-color-error: #d4736a;
  --mantine-color-default: #171219;
  --mantine-color-default-hover: #1f1822;
  --mantine-color-default-color: #e8e0d0;
  --mantine-color-default-border: #453729;

  /* Accent variant vars re-derived from the retuned ramps (Mantine's
     defaults are literal rgba of its stock hues). Filled stays mid-ramp:
     shade 8 pigment vanishes on ink black. */
  --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: #f3ead8;
  --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: #f3ead8;
  --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: #f3ead8;
  --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: #f3ead8;
  --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: #f3ead8;
  --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: #f3ead8;
  --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: #f3ead8;
  --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: #f3ead8;
  --mantine-color-gray-light: color-mix(in srgb, var(--mantine-color-gray-4) 12%, transparent);
  --mantine-color-gray-light-hover: color-mix(in srgb, var(--mantine-color-gray-4) 18%, transparent);
  --mantine-color-gray-light-color: var(--mantine-color-gray-2);

  /* Theme-local palette used by component rules below. */
  --gothic-brass: #b08d57;
  --gothic-brass-bright: #c9a86b;
  --gothic-brass-faint: rgba(176, 141, 87, 0.38);
  --gothic-brass-ghost: rgba(176, 141, 87, 0.14);
  --gothic-surface: #17121a;
  --gothic-recessed: #0a0709;
  --gothic-shell: #120e14;
  --gothic-line: #060409;
  --gothic-line-highlight: rgba(232, 224, 208, 0.08);

  /* App tokens: gold -> antique brass; manuscript podium tiers. */
  --flxn-gold: #c9a86b;
  --flxn-silver: #a8a196;
  --flxn-bronze: #b57945;
  --flxn-toast-success: #a3b98a;
  --flxn-toast-error: #dc9a90;
  --flxn-podium-1-bg: color-mix(in srgb, #b08d57 14%, #141016);
  --flxn-podium-1-border: color-mix(in srgb, #b08d57 55%, #322833);
  --flxn-podium-1-label: #d6b878;
  --flxn-podium-2-bg: color-mix(in srgb, #a8a196 8%, #141016);
  --flxn-podium-2-border: color-mix(in srgb, #a8a196 32%, #322833);
  --flxn-podium-2-label: #b5aea1;
  --flxn-podium-3-bg: color-mix(in srgb, #b57945 12%, #141016);
  --flxn-podium-3-border: color-mix(in srgb, #b57945 45%, #322833);
  --flxn-podium-3-label: #c08757;
  --flxn-showcase-bg: #141016;
  --flxn-overlay: rgba(6, 3, 8, 0.62);
  --flxn-dotgrid-color: rgba(176, 141, 87, 0.18);
}

[data-theme="gothic"][data-theme][data-mantine-color-scheme="light"] {
  --mantine-color-body: #efe6d5;
  --mantine-color-text: #2b2118;
  --mantine-color-bright: #1a140e;
  --mantine-color-dimmed: #6b5d4b;
  --mantine-color-placeholder: #857661;
  --mantine-color-anchor: var(--mantine-primary-color-7);
  --mantine-color-error: #9e2b20;
  --mantine-color-default: #f4ecdc;
  --mantine-color-default-hover: #ece1cb;
  --mantine-color-default-color: #2b2118;
  --mantine-color-default-border: #b9a67f;

  /* Accent variant vars re-derived from the retuned ramps; ink-saturated
     text shades on aged parchment. */
  --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: #f3ead8;
  --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: #f3ead8;
  --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: #f3ead8;
  --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: #f3ead8;
  --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: #f3ead8;
  --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: #f3ead8;
  --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: #f3ead8;
  --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: #f3ead8;
  --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);

  --gothic-brass: #8a6a34;
  --gothic-brass-bright: #7a5a28;
  --gothic-brass-faint: rgba(138, 106, 52, 0.45);
  --gothic-brass-ghost: rgba(138, 106, 52, 0.12);
  --gothic-surface: #f6efe0;
  --gothic-recessed: #e4d6bd;
  --gothic-shell: #e9dec9;
  --gothic-line: rgba(74, 58, 38, 0.45);
  --gothic-line-highlight: rgba(255, 252, 240, 0.85);

  --flxn-gold: #7a5a16;
  --flxn-silver: #7b7264;
  --flxn-bronze: #8c4f22;
  --flxn-toast-success: #4d6b34;
  --flxn-toast-error: #9e2b20;
  --flxn-podium-1-bg: color-mix(in srgb, #b08d57 16%, #f6efe0);
  --flxn-podium-1-border: color-mix(in srgb, #8a6a34 55%, #cfc0a4);
  --flxn-podium-1-label: #6f5116;
  --flxn-podium-2-bg: color-mix(in srgb, #8f8069 10%, #f6efe0);
  --flxn-podium-2-border: #b3a487;
  --flxn-podium-2-label: #6b5d4b;
  --flxn-podium-3-bg: color-mix(in srgb, #8c4f22 12%, #f6efe0);
  --flxn-podium-3-border: color-mix(in srgb, #8c4f22 45%, #cfc0a4);
  --flxn-podium-3-label: #74431c;
  --flxn-showcase-bg: #f6efe0;
  --flxn-overlay: rgba(26, 18, 10, 0.45);
  --flxn-dotgrid-color: rgba(138, 104, 58, 0.22);
}

/* ---------------------------------------------------------------- *
 * 3. Full-page decoration: candlelit vignette (dark scheme only)
 * ---------------------------------------------------------------- */

[data-theme="gothic"][data-mantine-color-scheme="dark"] .flxn-theme-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(176, 141, 87, 0.04), transparent 70%),
    radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(4, 2, 6, 0.45) 100%);
}

/* ---------------------------------------------------------------- *
 * 4. Component restyles
 * ---------------------------------------------------------------- */

/* Headings: Cormorant, slight italic from h3 down for the manuscript voice. */
[data-theme="gothic"] .mantine-Title-root {
  letter-spacing: 0.01em;
}
[data-theme="gothic"] h3.mantine-Title-root,
[data-theme="gothic"] h4.mantine-Title-root {
  font-style: italic;
  font-weight: 600;
}

/* Cards & panels: thin double border in brass (1px border + inset outline). */
[data-theme="gothic"] .mantine-Paper-root[data-with-border] {
  border: 1px solid var(--gothic-brass-faint);
  outline: 1px solid var(--gothic-brass-ghost);
  outline-offset: -4px;
  background-color: var(--gothic-surface);
}
[data-theme="gothic"] .mantine-Card-root {
  background-color: var(--gothic-surface);
}

/* Buttons: wax-seal solids in the user's accent, or brass-ruled outlines. */
[data-theme="gothic"] .mantine-Button-root {
  letter-spacing: 0.03em;
}
[data-theme="gothic"] .mantine-Button-root[data-variant="filled"],
[data-theme="gothic"] .mantine-ActionIcon-root[data-variant="filled"] {
  border: 1px solid var(--mantine-primary-color-9);
  box-shadow: inset 0 1px 0 rgba(246, 239, 224, 0.12), 0 2px 8px rgba(0, 0, 0, 0.45);
}
[data-theme="gothic"] .mantine-Button-root[data-variant="default"],
[data-theme="gothic"] .mantine-Button-root[data-variant="outline"],
[data-theme="gothic"] .mantine-ActionIcon-root[data-variant="default"],
[data-theme="gothic"] .mantine-ActionIcon-root[data-variant="outline"] {
  border-color: var(--gothic-brass-faint);
}

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

/* Tabs: rubricated active label in the accent under a brass rule. */
[data-theme="gothic"] .mantine-Tabs-list {
  --tabs-list-border-size: 1px;
}
[data-theme="gothic"] .mantine-Tabs-tab {
  letter-spacing: 0.02em;
}
[data-theme="gothic"] .mantine-Tabs-tab[data-active] {
  border-color: var(--gothic-brass);
  color: var(--mantine-primary-color-light-color);
}
[data-theme="gothic"] .mantine-Tabs-tab[data-active]:hover {
  border-color: var(--gothic-brass-bright);
}

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

/* Shell: bound pages — header and navbar as darker leather edges. */
[data-theme="gothic"] .mantine-AppShell-header {
  background-color: var(--gothic-shell);
  border-bottom: 1px solid var(--gothic-brass-faint);
}
[data-theme="gothic"] .mantine-AppShell-navbar {
  background-color: var(--gothic-shell);
  border-color: var(--gothic-brass-faint);
}

/* Segmented control: engraved channel with a brass-edged slider. */
[data-theme="gothic"] .mantine-SegmentedControl-root {
  background-color: var(--gothic-recessed);
}
[data-theme="gothic"] .mantine-SegmentedControl-indicator {
  background-color: var(--gothic-surface);
  border: 1px solid var(--gothic-brass-faint);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
[data-theme="gothic"] .mantine-SegmentedControl-label {
  letter-spacing: 0.02em;
}

/* Dividers: engraved rule with a centered fleuron ornament. */
[data-theme="gothic"] .mantine-Divider-root {
  --divider-color: var(--gothic-line);
}
[data-theme="gothic"] .mantine-Divider-root[data-orientation="horizontal"] {
  box-shadow: 0 1px 0 var(--gothic-line-highlight);
}
[data-theme="gothic"] .mantine-Divider-root[data-orientation="horizontal"]:not([data-with-label]) {
  position: relative;
  overflow: visible;
}
[data-theme="gothic"] .mantine-Divider-root[data-orientation="horizontal"]:not([data-with-label])::before {
  content: "\2766"; /* ❦ fleuron */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0 0.5em;
  background-color: var(--mantine-color-body);
  color: var(--gothic-brass);
  font-size: 0.8rem;
  line-height: 1;
}
[data-theme="gothic"] .mantine-Divider-label {
  color: var(--gothic-brass);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--mantine-font-size-xs);
}

/* Overlays: sealed-note dropdowns and modals with double brass borders. */
[data-theme="gothic"] .mantine-Modal-content,
[data-theme="gothic"] .mantine-Popover-dropdown {
  background-color: var(--gothic-surface);
  border: 1px solid var(--gothic-brass-faint);
  outline: 1px solid var(--gothic-brass-ghost);
  outline-offset: -4px;
}
[data-theme="gothic"] .mantine-Modal-header {
  background-color: var(--gothic-surface);
}
[data-theme="gothic"] .mantine-Tooltip-tooltip {
  background-color: #060409;
  color: #e8e0d0;
  border: 1px solid var(--gothic-brass-faint);
}

/* Notifications: sealed notes with a brass frame. */
[data-theme="gothic"] .mantine-Notification-root {
  background-color: var(--gothic-surface);
  border: 1px solid var(--gothic-brass-faint);
  box-shadow: var(--mantine-shadow-md);
}

/* Badges: engraved plaques. */
[data-theme="gothic"] .mantine-Badge-root {
  letter-spacing: 0.06em;
  font-weight: 600;
}

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

/* ---------------------------------------------------------------- *
 * 5. App component hooks
 * ---------------------------------------------------------------- */

/* Tab strip: docks as a shell strip with a brass rule; active label
   rubricated in the accent over a thin double brass rule (gilded underline). */
[data-theme="gothic"] .flxn-tabs[data-stuck] {
  background-color: var(--gothic-shell);
  box-shadow: inset 0 -1px 0 var(--gothic-brass-faint);
}
[data-theme="gothic"] .flxn-tab {
  color: var(--mantine-color-dimmed);
  letter-spacing: 0.02em;
}
[data-theme="gothic"] .flxn-tab[data-active] {
  color: var(--mantine-primary-color-light-color);
  font-weight: 600;
}
[data-theme="gothic"] .flxn-tabs-indicator {
  border-bottom: 3px double var(--gothic-brass);
  padding-inline: 0.5rem;
}

/* Nav grid tiles: brass double-ruled panels, flat gilded glyph. */
[data-theme="gothic"] .flxn-tile {
  background-color: var(--gothic-surface);
  border: 1px solid var(--gothic-brass-faint);
  outline: 1px solid var(--gothic-brass-ghost);
  outline-offset: -4px;
}
[data-theme="gothic"] .flxn-tile-icon {
  color: var(--gothic-brass-bright);
}

/* "See all" link: brass-rimmed chip, accent-inked label. */
[data-theme="gothic"] .flxn-see-all {
  background-color: var(--gothic-brass-ghost);
  border: 1px solid var(--gothic-brass-faint);
  color: var(--mantine-primary-color-light-color);
}
@media (hover: hover) {
  [data-theme="gothic"] .flxn-see-all:hover {
    background-color: var(--mantine-primary-color-light);
  }
}

/* Match card + reaction tray: one construction — matching brass rules,
   tray recessed as a deeper ink panel. */
[data-theme="gothic"] .flxn-match-card {
  background-color: var(--gothic-surface);
  border: 1px solid var(--gothic-brass-faint);
}
[data-theme="gothic"] .flxn-reaction-row {
  background-color: var(--gothic-recessed);
  border: 1px solid var(--gothic-brass-faint);
}