/* DM Tools design tokens: the one place that defines colours, fonts, radii, spacing, shadows and
   the hexagon helpers. Every page loads this first (src/site/layout.ts), then site.css.
   Documented, with a contrast table, in docs/design-system.md. Names are stable: external
   components (the open-source tracker) may consume them. Never hard-code a colour or the font
   elsewhere; add a token here instead.

   Themes: light is the default. Dark applies when the visitor chose "Dark" (site.js sets
   data-theme="dark" on <html>) or when they chose nothing (system) and their operating system
   prefers dark. Choosing "Light" sets data-theme="light" and wins over the system. The dark values
   therefore appear twice below (explicit and system); keep both blocks identical. */

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

:root {
  color-scheme: light dark;

  /* typography */
  --dm-font-sans: 'Alegreya Sans', 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
  /* headings, menu tabs and buttons */
  --dm-font-display: 'Alegreya', Georgia, 'Times New Roman', serif;
  --dm-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --dm-weight-body: 400;
  --dm-weight-strong: 700;

  /* radius: none. Corners are cut (chamfered) like the facets of a die; see "cut corners" at the
     end of this file. Kept as zero so older rules that still read these tokens go square. */
  --dm-radius-sm: 0;
  --dm-radius-md: 0;
  --dm-radius-lg: 0;
  --dm-radius-pill: 0;

  /* cut corner sizes. --dm-cut is the size an element uses (override it on the element, for
     example --dm-cut: var(--dm-cut-lg)) */
  --dm-cut-sm: 0.35rem;
  --dm-cut-md: 0.6rem;
  --dm-cut-lg: 1rem;
  --dm-cut-xl: 1.6rem;
  --dm-cut: var(--dm-cut-md);
  --dm-edge-w: 1px;

  /* spacing scale */
  --dm-space-1: 0.25rem;
  --dm-space-2: 0.5rem;
  --dm-space-3: 0.75rem;
  --dm-space-4: 1rem;
  --dm-space-5: 1.5rem;
  --dm-space-6: 2rem;
  --dm-space-7: 3rem;

  /* hexagon geometry helpers. --dm-hex-clip is the flat-top "tab" hexagon (any width; the
     points sit --dm-hex-notch in from the left and right). --dm-hex-clip-pointy is the regular
     pointy-top hexagon for square elements. */
  --dm-hex-notch: 0.8rem;
  --dm-hex-clip: polygon(
    var(--dm-hex-notch) 0,
    calc(100% - var(--dm-hex-notch)) 0,
    100% 50%,
    calc(100% - var(--dm-hex-notch)) 100%,
    var(--dm-hex-notch) 100%,
    0 50%
  );
  --dm-hex-clip-pointy: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  --dm-hex-tile-width: 55.43px;
  --dm-hex-tile-height: 96px;

  /* focus */
  --dm-focus-width: 3px;
  --dm-focus-offset: 2px;

  /* gold (donation frame, active tab); the same in both themes */
  --dm-gold: #fdb931;
  --dm-gold-light: #fedb37;
  --dm-gold-deep: #8a6e2f;
  --dm-gold-shadow: #5d4a1f;
  --dm-on-gold: #2a1f05;
  --dm-gold-gradient-soft: linear-gradient(135deg, #fedb37 0%, #fdb931 45%, #dc9d22 100%);
  --dm-gold-gradient:
    radial-gradient(
      ellipse farthest-corner at right bottom,
      #fedb37 0%,
      #fdb931 8%,
      #9f7928 30%,
      #8a6e2f 40%,
      transparent 80%
    ),
    radial-gradient(
      ellipse farthest-corner at left top,
      #ffffff 0%,
      #ffffac 8%,
      #d1b464 25%,
      #5d4a1f 62.5%,
      #5d4a1f 100%
    );

  /* brand */
  --dm-discord: #5865f2;
  --dm-discord-hover: #4752c4;
  --dm-on-discord: #ffffff;

  /* light theme */
  --dm-surface: #f4eee2;
  --dm-surface-raised: #ffffff;
  --dm-surface-sunken: #ebe3d2;
  --dm-text: #17231f;
  --dm-text-muted: #485851;
  --dm-heading: #073027;
  --dm-accent: #14604a;
  --dm-accent-hover: #0d4a39;
  --dm-on-accent: #ffffff;
  --dm-link: #14604a;
  --dm-gold-text: #7a5400;
  --dm-border: #cdbfae;
  --dm-border-strong: #8a7a66;
  --dm-danger: #a3261e;
  --dm-on-danger: #ffffff;
  --dm-ok: #1a6b3a;
  --dm-focus: #14604a;
  /* focus ring drawn INSIDE cut-corner shapes (clip-path would clip an outside outline) */
  --dm-focus-ring: #17231f;
  /* header and footer bands: dark green in both themes */
  --dm-bar: #073027;
  --dm-bar-raised: #124a3c;
  --dm-bar-edge: #4d8a77;
  --dm-on-bar: #f7f1e9;
  --dm-on-bar-muted: #c0c5aa;
  --dm-bar-focus: #f7f1e9;
  /* word-game marks (Power word-le tiles and keys): blue = right place, gold = wrong place,
     grey-green = not in the word. Blue against gold stays apart for the common kinds of colour
     blindness, and every mark also carries a symbol. */
  --dm-mark-correct: #1f5fa5;
  --dm-on-mark-correct: #ffffff;
  --dm-mark-present: #fdb931;
  --dm-on-mark-present: #2a1f05;
  --dm-mark-absent: #4b5a53;
  --dm-on-mark-absent: #ffffff;
  /* the hex battle-mat page background (a tiling SVG) and its soft top glow */
  /* the three hexagon rows of the band above the footer: flat colour steps from the page colour
     to the footer colour (they follow the theme because --dm-surface and --dm-bar do) */
  --dm-footer: var(--dm-bar);
  --dm-band-1: color-mix(in srgb, var(--dm-footer) 22%, var(--dm-surface));
  --dm-band-2: color-mix(in srgb, var(--dm-footer) 58%, var(--dm-surface));
  --dm-band-3: var(--dm-footer);
  --dm-mat-light: url('/media/hexmat-light.svg');
  --dm-mat-dark: url('/media/hexmat-dark.svg');
  --dm-mat-image: var(--dm-mat-light);
  --dm-mat-glow: rgba(255, 255, 255, 0.55);
  --dm-shadow-sm: 0 1px 2px rgba(7, 48, 39, 0.12);
  --dm-shadow-md: 0 6px 18px rgba(7, 48, 39, 0.16);
  --dm-shadow-lg: 0 14px 34px rgba(7, 48, 39, 0.22);
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --dm-surface: #08302a;
  --dm-surface-raised: #0f4136;
  --dm-surface-sunken: #052520;
  --dm-text: #f7f1e9;
  --dm-text-muted: #b9c4b4;
  --dm-heading: #f7f1e9;
  --dm-accent: #7dd3b0;
  --dm-accent-hover: #a3e4c8;
  --dm-on-accent: #052019;
  --dm-link: #8ee0c0;
  --dm-gold-text: #fdc94f;
  --dm-border: #2f5f53;
  --dm-border-strong: #5a9181;
  --dm-danger: #ff9a90;
  --dm-on-danger: #14171b;
  --dm-ok: #8fe0a9;
  --dm-focus: #9fe3c6;
  --dm-focus-ring: #f7f1e9;
  --dm-bar: #04211b;
  --dm-bar-raised: #0d3a30;
  --dm-bar-edge: #3f7a68;
  --dm-footer: #021611;
  --dm-mark-correct: #2f6fb8;
  --dm-mark-absent: #55645e;
  --dm-on-mark-absent: #f7f1e9;
  --dm-mat-image: var(--dm-mat-dark);
  --dm-mat-glow: rgba(125, 211, 176, 0.07);
  --dm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --dm-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35);
  --dm-shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.5);
}

:root[data-theme='light'] {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --dm-surface: #08302a;
    --dm-surface-raised: #0f4136;
    --dm-surface-sunken: #052520;
    --dm-text: #f7f1e9;
    --dm-text-muted: #b9c4b4;
    --dm-heading: #f7f1e9;
    --dm-accent: #7dd3b0;
    --dm-accent-hover: #a3e4c8;
    --dm-on-accent: #052019;
    --dm-link: #8ee0c0;
    --dm-gold-text: #fdc94f;
    --dm-border: #2f5f53;
    --dm-border-strong: #5a9181;
    --dm-danger: #ff9a90;
    --dm-on-danger: #14171b;
    --dm-ok: #8fe0a9;
    --dm-focus: #9fe3c6;
    --dm-focus-ring: #f7f1e9;
    --dm-bar: #04211b;
    --dm-bar-raised: #0d3a30;
    --dm-bar-edge: #3f7a68;
    --dm-footer: #021611;
    --dm-mark-correct: #2f6fb8;
    --dm-mark-absent: #55645e;
    --dm-on-mark-absent: #f7f1e9;
    --dm-mat-image: var(--dm-mat-dark);
    --dm-mat-glow: rgba(125, 211, 176, 0.07);
    --dm-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --dm-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.35);
    --dm-shadow-lg: 0 14px 34px rgba(0, 0, 0, 0.5);
  }
}

/* ---------- cut corners ----------
   Every box has its four corners cut off at 45 degrees (like a die's facets) instead of rounded.
   clip-path would also clip a border, a shadow and an outside focus outline, so the outline is
   drawn with background layers instead: the border box shows the edge colour, the padding box the
   fill, and four small gradients draw the diagonal edges. No pseudo-elements, so it works on
   inputs and buttons too. Box shadows are not used on cut shapes (they would be clipped).

   Use: add class "dm-cut" (or give a component class to the list below), then set the knobs:
     --dm-cut        corner size (--dm-cut-sm, --dm-cut-md (default), --dm-cut-lg, --dm-cut-xl)
     --dm-edge       outline colour (default --dm-border-strong, so every outline can be seen)
     --dm-edge-w     outline width (default 1px; set border-width is not needed)
     --dm-fill       background colour (default --dm-surface-raised; "transparent" is fine)
   Never set background or border on these elements; set the knobs. Hover/active: change
   --dm-edge and --dm-fill. Keyboard focus: the ring is drawn inside the shape automatically
   (3px, --dm-focus-ring).
   Shape only (gradient or image backgrounds, no outline): class "dm-cut-clip". */
.dm-cut-clip,
.prose img,
.hero-figure img,
.dm-cut,
.btn,
.donate-button,
.donate-hide,
.theme-toggle button,
.post-card,
.tile,
.category-list a,
.dm-dialog,
.currency-link,
.currency-current,
.plan-card,
.plan-flag,
.badge.current,
.table-wrap,
.tier-badge,
.page-about .prose,
.prose pre,
.about-stat,
.hero-panel,
.account-card,
main .card,
.card input:not([type='hidden']):not([type='checkbox']):not([type='radio']),
.card button,
.it-root .it-field select,
.token-tag,
.dice-notation,
.dice-result {
  border-radius: 0;
  clip-path: polygon(
    var(--dm-cut) 0,
    calc(100% - var(--dm-cut)) 0,
    100% var(--dm-cut),
    100% calc(100% - var(--dm-cut)),
    calc(100% - var(--dm-cut)) 100%,
    var(--dm-cut) 100%,
    0 calc(100% - var(--dm-cut)),
    0 var(--dm-cut)
  );
}
/* The knobs are custom properties, and custom properties inherit: a button inside a gold 3px dialog
   or a featured plan card would otherwise take that edge width and colour (and the cut size of the
   panel it sits in). So the small controls named here start from their own defaults; a component class sets
   its own knobs after this (site.css, billing.css, ...). Panels (cards, tiles, dialogs) are not in
   this list: they set theirs, or use the shared defaults below. */
.btn,
.donate-button,
.donate-hide,
.theme-toggle button,
.category-list a,
.currency-link,
.currency-current,
.badge.current,
.plan-flag {
  --dm-cut: var(--dm-cut-md);
  --dm-edge: var(--dm-border-strong);
  --dm-edge-w: 1px;
  --dm-fill: var(--dm-surface-raised);
}
.dm-cut,
.btn,
.donate-button,
.donate-hide,
.theme-toggle button,
.post-card,
.tile,
.category-list a,
.dm-dialog,
.currency-link,
.currency-current,
.plan-card,
.plan-flag,
.badge.current,
.table-wrap,
.tier-badge,
.page-about .prose,
.prose pre,
.about-stat,
.hero-panel,
.account-card,
main .card,
.card input:not([type='hidden']):not([type='checkbox']):not([type='radio']),
.card button,
.it-root .it-field select,
.token-tag,
.dice-notation,
.dice-result {
  --_e: var(--dm-edge, var(--dm-border-strong));
  --_f: var(--dm-fill, var(--dm-surface-raised));
  --_w: var(--dm-edge-w, 1px);
  --_b: var(--dm-edge-w, 1px);
  --_k: calc(var(--dm-cut) * 0.7071);
  --_s:
    transparent var(--_k), var(--_e) var(--_k), var(--_e) calc(var(--_k) + var(--_w)),
    transparent calc(var(--_k) + var(--_w));
  box-sizing: border-box;
  border: var(--_b) solid transparent;
  box-shadow: none;
  background:
    linear-gradient(135deg, var(--_s)) top left / var(--dm-cut) var(--dm-cut) no-repeat border-box
      border-box,
    linear-gradient(225deg, var(--_s)) top right / var(--dm-cut) var(--dm-cut) no-repeat border-box
      border-box,
    linear-gradient(315deg, var(--_s)) bottom right / var(--dm-cut) var(--dm-cut) no-repeat
      border-box border-box,
    linear-gradient(45deg, var(--_s)) bottom left / var(--dm-cut) var(--dm-cut) no-repeat border-box
      border-box,
    linear-gradient(var(--_e), var(--_e)) top left / 100% var(--_b) no-repeat border-box border-box,
    linear-gradient(var(--_e), var(--_e)) bottom left / 100% var(--_b) no-repeat border-box
      border-box,
    linear-gradient(var(--_e), var(--_e)) top left / var(--_b) 100% no-repeat border-box border-box,
    linear-gradient(var(--_e), var(--_e)) top right / var(--_b) 100% no-repeat border-box border-box,
    linear-gradient(var(--_f), var(--_f)) padding-box;
}
.dm-cut:focus-visible,
.btn:focus-visible,
.donate-button:focus-visible,
.donate-hide:focus-visible,
.theme-toggle button:focus-visible,
.post-card:focus-visible,
.tile:focus-visible,
.category-list a:focus-visible,
.currency-link:focus-visible,
.table-wrap:focus-visible,
.card input:focus-visible,
.card button:focus-visible,
.it-root .it-field select:focus-visible {
  --_e: var(--dm-focus-ring);
  --_w: 3px;
  outline: none;
  box-shadow: inset 0 0 0 3px var(--dm-focus-ring);
}
.dm-cut-sm {
  --dm-cut: var(--dm-cut-sm);
}
.dm-cut-lg {
  --dm-cut: var(--dm-cut-lg);
}
.dm-cut-xl {
  --dm-cut: var(--dm-cut-xl);
}