/* foe-guide.dk – design tokens
   Taken 1:1 from the approved designs in /design. Use these variables instead of raw hex values. */

@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700&display=swap");

:root {
  /* Browns */
  --foe-ink: #2A1A0E;            /* banner/hero background, darkest brown */
  --foe-brown: #5F391A;          /* header, footer, warning strip */
  --foe-brown-card: #754927;     /* card header bars, number badges, table headers */
  --foe-brown-line: #5A3E28;     /* borders/pills on dark backgrounds */
  --foe-skyline: #3B2616;        /* skyline silhouette */

  /* Golds */
  --foe-gold: #C9963F;           /* header bottom border, shield outline, focus ring */
  --foe-gold-light: #E8C48A;     /* ".DK", accents and big numbers on dark */

  /* Neutrals */
  --foe-bg: #F4ECE5;             /* page background */
  --foe-surface: #FFFFFF;        /* cards */
  --foe-text: #37383F;           /* body text */
  --foe-heading: #14151A;        /* headings on light */
  --foe-muted: #5B5148;          /* secondary text on light */
  --foe-faint: #8A7B6E;          /* list numbers */
  --foe-border: #E4D6C8;         /* card/table borders */
  --foe-divider: #EFE4DA;        /* row dividers inside cards */
  --foe-cream: #FFF4E6;          /* text on dark */
  --foe-cream-2: #E6D5C3;        /* secondary text on dark */
  --foe-cream-3: #C9B39C;        /* tertiary text on dark (breadcrumbs, labels) */
  --foe-tag-bg: #F4E3D3;         /* small brown tags ("Temaside", current item) */
  --foe-link: #7A4C24;
  --foe-link-hover: #5F391A;

  /* Actions & status (from the current blog) */
  --foe-green: #09804C;          /* primary buttons, "N ændringer" pill, Fantastisk */
  --foe-purple: #6B2C91;         /* TILFØJET */
  --foe-yellow: #F2C94C;         /* RETTET, Tjae   (text on it: #3D2E00) */
  --foe-blue: #2F5A8A;           /* God */
  --foe-grey: #5E5751;           /* BEGRAVET, Nej tak, Kirkegården */

  /* Rating chip tints (SB tier list) */
  --foe-tier-fantastisk-bg: #E3F3EA; --foe-tier-fantastisk-fg: #0B5A37;
  --foe-tier-god-bg: #E6EEF7;        --foe-tier-god-fg: #24476E;
  --foe-tier-tjae-bg: #FBF3D6;       --foe-tier-tjae-fg: #5C4300;

  /* Copper / gold level pills (SB update) */
  --foe-copper-bg: #F1DCCB; --foe-copper-fg: #7C3F12;
  --foe-goldlvl-bg: #FBEBB5; --foe-goldlvl-fg: #6B4F00;

  /* Type */
  --foe-font-display: "Cinzel", Georgia, serif;   /* only big headings, logo, big numbers */
  --foe-font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Shape */
  --foe-radius: 8px;
  --foe-radius-sm: 6px;
  --foe-radius-xs: 4px;
  --foe-shadow: 0 1px 3px rgba(60, 35, 15, 0.12);
  --foe-container: 1200px;
  --foe-gutter: 24px;
}