/*
  Illuminated Folio · design tokens
  The single source of colour, type and shape for Henchmate. Read DESIGN.md before adding to it.
  Light ("Vellum") is the base. Dark ("Candlelight") applies when the OS prefers dark and the
  person has not chosen Vellum, or when they choose Candlelight. folio.js sets data-theme on <html>.
*/
:root{
  --overlay-backdrop-filter:blur(10px) saturate(.7);
  /* Papers */
  --paper:#ece2cd;        /* page background */
  --leaf:#f6efe0;         /* panels, cards, editor */
  --sheet:#fbf6ea;        /* inputs, letters, handouts, dialogs */
  --foxed:#e3d6bb;        /* toolbars, hover wells, avatars */
  /* Inks */
  --text:#2a2017;         /* iron-gall: body text */
  --text-soft:#6b5c49;    /* faded ink: secondary text, labels */
  --rule:#cdbd9e;         /* hairlines between things */
  --rule-strong:#8f7d61;  /* frames, outlines, input lines */
  /* Pigments */
  --vermilion:#a8341f;    /* primary action, names, drop caps */
  --on-vermilion:#fbf3e4; /* text on vermilion */
  --lapis:#2e4a8b;        /* links, focus, read-aloud */
  --gold:#8a6418;         /* gold text: active turn, lore, locations */
  --gold-leaf:#c49a3a;    /* gold fills and frames */
  --verdigris:#3f6e5d;    /* shared, healed, success */
  --wound:#a8341f;        /* damage, danger, destructive */
  --seal:#9b2a1a;         /* sealing wax, visibility only */
  --seal-hi:#c8503a;
  --shadow:#2a2017;
  /* Coin metals: purses and coin counters only, never decoration */
  --coin-pp:#c3c7cb;--coin-gp:#cfa441;--coin-ep:#d8cf9c;--coin-sp:#a7aaad;--coin-cp:#b4683a;
  /* Washes (tinted fills) */
  --vermilion-wash:color-mix(in srgb,var(--vermilion) 9%,transparent);
  --lapis-wash:color-mix(in srgb,var(--lapis) 8%,transparent);
  --gold-wash:color-mix(in srgb,var(--gold-leaf) 16%,transparent);
  --verdigris-wash:color-mix(in srgb,var(--verdigris) 10%,transparent);
  --wound-wash:color-mix(in srgb,var(--wound) 10%,transparent);
  --ink-wash:color-mix(in srgb,var(--text) 5%,transparent);
  /* Type */
  --font-display:"IM Fell English SC","EB Garamond",Garamond,Georgia,serif;
  --font-fell:"IM Fell English","EB Garamond",Garamond,Georgia,serif;
  --font-text:"EB Garamond",Garamond,Georgia,"Times New Roman",serif;
  --font-label:"Cormorant SC","EB Garamond",Garamond,Georgia,serif;
  /* Shape */
  --radius:2px;
  --radius-tag:1px;
  --frame:inset 0 0 0 4px var(--leaf),inset 0 0 0 5px var(--rule);  /* double-ruled frame */
  --lift:0 18px 40px -20px color-mix(in srgb,var(--shadow) 55%,transparent); /* floating things only */
  --grain-opacity:.35;
  --grain-blend:multiply;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#17120d;--leaf:#211a13;--sheet:#1a140e;--foxed:#2b2219;
  --text:#ece0c8;--text-soft:#b3a286;--rule:#3d3226;--rule-strong:#7a6950;
  --vermilion:#e0634a;--on-vermilion:#1a120c;--lapis:#9db4ea;--gold:#e0b45a;--gold-leaf:#e0b45a;
  --verdigris:#7fb59e;--wound:#ef7a5f;--seal:#a33322;--seal-hi:#d4604a;--shadow:#000;
  --coin-pp:#a9aeb3;--coin-gp:#c39a3d;--coin-ep:#b8ae7c;--coin-sp:#8c9094;--coin-cp:#a05d35;
  --grain-opacity:.1;--grain-blend:screen;color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#17120d;--leaf:#211a13;--sheet:#1a140e;--foxed:#2b2219;
  --text:#ece0c8;--text-soft:#b3a286;--rule:#3d3226;--rule-strong:#7a6950;
  --vermilion:#e0634a;--on-vermilion:#1a120c;--lapis:#9db4ea;--gold:#e0b45a;--gold-leaf:#e0b45a;
  --verdigris:#7fb59e;--wound:#ef7a5f;--seal:#a33322;--seal-hi:#d4604a;--shadow:#000;
  --coin-pp:#a9aeb3;--coin-gp:#c39a3d;--coin-ep:#b8ae7c;--coin-sp:#8c9094;--coin-cp:#a05d35;
  --grain-opacity:.1;--grain-blend:screen;color-scheme:dark}
/* Scale the entire interface, including controls, spacing, artwork and dialogs. */
:root[data-ui-size="big"]{zoom:1.25}
:root[data-ui-size="biggest"]{zoom:1.5}

/* Base */
html,body{background:var(--paper);color:var(--text)}
button,input,select,textarea{font-family:inherit}
body{font-family:var(--font-text);font-variant-numeric:oldstyle-nums;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:var(--grain-opacity);mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .24 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
::selection{background:color-mix(in srgb,var(--gold-leaf) 35%,transparent);color:var(--text)}
:focus-visible{outline:2px solid var(--lapis);outline-offset:2px}
a{color:var(--lapis);text-underline-offset:3px;text-decoration-thickness:1px}