/* FOR THE CROWN — the theme: every colour, face, shape, shadow and layer
   the interface uses, named in one place. css/style.css draws with these
   names and nothing else, so a new look or another pack's chrome changes
   this file alone. The pieces and cards carry the printed set's own
   colours (js/ui/art.js, card_kit.js, card_art.js) and are not themed here.

   Parchment, wax and two heraldic armies. */
:root {
  /* ---- paper: the page, raised surfaces, ink and lines ---- */
  --parch: #f4ecd9;                           /* the page */
  --parch-2: #e9dec3;                         /* the page's edge, trays */
  --parch-3: #dccda8;                         /* quiet borders, notices */
  --surface: #fffaf0;                         /* a raised sheet: bars, bubbles, panels, tiles */
  --surface-veil: rgba(255, 252, 244, 0.7);   /* a tile that lets the page show through */
  --surface-glow: #fbf6ea;                    /* the bright centre of the page */
  --tray: rgba(233, 222, 195, 0.6);           /* the hand's tray */
  --highlight: rgba(255, 255, 255, 0.6);      /* the bevel on a button */
  --ink: #2a2017;
  --ink-soft: #5c4a37;
  --ink-faint: rgba(42, 32, 23, 0.55);        /* coordinates, sub-labels */
  --line: #b59e74;

  /* ---- wood: the board's frame and the bar above it ---- */
  --wood: #4b3826;
  --wood-deep: #3a2a1b;
  --wood-edge: #5b4630;
  --on-wood: var(--parch);                    /* type on wood */
  --on-wood-soft: rgba(244, 236, 217, 0.7);
  --on-wood-faint: rgba(244, 236, 217, 0.45);
  --on-wood-veil: rgba(255, 245, 230, 0.1);   /* a button's face on wood */
  --on-wood-line: rgba(255, 245, 230, 0.35);  /* its edge */
  --on-wood-press: rgba(255, 245, 230, 0.2);  /* pressed */

  /* ---- the game's red: headings, the primary button, the wax ---- */
  --crimson: #862525;
  --crimson-deep: #5e1414;                    /* its edge */
  --crimson-bright: #9d2d2d;                  /* hovered */
  --crimson-ink: #7c1a14;                     /* red text on a tint */
  --crimson-halo: rgba(134, 37, 37, 0.15);
  --on-crimson: #fff6e6;                      /* type on red */

  /* ---- the two armies ---- */
  --blue: #2c5aa0;
  --blue-deep: #1d3f73;
  --blue-glow: rgba(44, 90, 160, 0.45);
  --blue-halo: rgba(44, 90, 160, 0.28);
  --gold: #d9a82c;
  --gold-deep: #9b7414;
  --gold-halo: rgba(217, 168, 44, 0.35);
  --gold-pale: #fff3b0;

  /* ---- the board and its marks ---- */
  --sq-light: #e7dcb9;
  --sq-dark: #a4b47d;
  --march: rgba(35, 80, 150, 0.55);           /* the dot: a square to move to */
  --attack: #b3261e;                          /* the ring: a piece to take; also danger */
  --attack-glow: rgba(179, 38, 30, 0.6);
  --attack-halo: rgba(179, 38, 30, 0.3);
  --sel: #f2c230;                             /* what can be tapped, and what is tapped */
  --sel-glow: rgba(242, 194, 48, 0.7);
  --sel-halo: rgba(242, 194, 48, 0.35);
  --sel-wash: rgba(242, 194, 48, 0.12);
  --unsafe: #e07a12;                          /* a square the enemy could take on */

  /* ---- the four kinds of card effect, each with a tint to sit on ---- */
  --order: #9b2c2c;
  --action: #2d5b88;
  --train: #3d7443;
  --treasure: #a97a12;
  --red-tint: #f1d9d3;
  --blue-tint: #e8eef7;
  --green-tint: #e3f0dc;
  --gold-tint: #f3e6c4;
  --blue-ink: #2b5d97;
  --green-ink: #2b5a2f;
  --gold-ink: #6d4f0c;

  /* ---- coins ---- */
  --coin: #e2b24a;
  --coin-ink: #4d3409;
  --coin-glow: #f6dc8c;

  /* ---- shadows and scrims ---- */
  --shadow-ink: rgba(42, 32, 23, 0.35);       /* the colour every shadow is cast in */
  --shadow: 0 2px 6px rgba(42, 32, 23, 0.25); /* a panel on the page */
  --shadow-lift: 0 6px 18px var(--shadow-ink);/* a card lifted to be read */
  --shadow-modal: 0 10px 30px rgba(0, 0, 0, 0.4);
  --shadow-sheet: 0 -8px 24px rgba(0, 0, 0, 0.3);
  --shadow-pinned: 0 -6px 10px -8px rgba(0, 0, 0, 0.35); /* a row pinned at a sheet's foot */
  --scrim: rgba(30, 22, 14, 0.55);            /* behind a modal, around a spotlight */
  --scrim-soft: rgba(30, 22, 14, 0.2);

  /* ---- shape ---- */
  --radius-sm: 4px;                           /* the board, badges, inputs */
  --radius: 8px;                              /* buttons, panels, tiles, cards */
  --radius-lg: 12px;                          /* bubbles, modals, sheets */
  --radius-pill: 999px;

  /* ---- type ---- */
  --serif: "EB Garamond", Georgia, "Times New Roman", serif;
  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --serif-num: "Crimson Text", var(--serif);  /* lining numerals on coins */
  --mono: ui-monospace, Menlo, Consolas, monospace;

  /* ---- layers, bottom to top ---- */
  --z-banner: 30;
  --z-sheet: 40;
  --z-fx: 45;
  --z-modal: 50;
  --z-coach: 60;
}