/* Elemon design tokens (light pastel system, from the Elemon UI kit: css/eui.css, /ui/).
   Shared by the site (landing, Elemondex, fact pages, learn, printables, teachers, 404) and safe
   for the game to import: variables only, no selectors besides :root and [data-type]. */
:root {
  /* ink + surfaces */
  --e-ink: #261d3d;
  --e-ink-2: #5f587a;
  --e-ink-3: #716a8c;
  --e-bg: #fbf9ff;
  --e-card: #ffffff;
  --e-card-2: #f7f4ff;
  --e-line: rgba(38, 29, 61, 0.08);
  --e-line-2: rgba(38, 29, 61, 0.14);

  /* scene tints (a = light centre, b = edge), one per section/creature, as in the kit tiles */
  --e-lavender-a: #f4f0ff; --e-lavender-b: #e3dafc;
  --e-lilac-a: #f2edff;    --e-lilac-b: #ddd3fa;
  --e-mint-a: #effbf7;     --e-mint-b: #d3f0e8;
  --e-pink-a: #fff1f6;     --e-pink-b: #fbdbe7;
  --e-lemon-a: #fffbe8;    --e-lemon-b: #fdefb8;
  --e-rose-a: #fff3f1;     --e-rose-b: #fbdcd8;
  --e-sky-a: #eff9fd;      --e-sky-b: #d2ecf6;
  --e-peach-a: #fff6ec;    --e-peach-b: #fde3c8;
  --e-night-a: #8a77d0;    --e-night-b: #5d4aa6;

  /* accents */
  --e-violet: #8b6cf2;
  --e-violet-2: #a58cff;
  --e-violet-ink: #5b3fd0;
  --e-green: #22b26a;
  --e-green-2: #3fcf86;
  --e-red: #ee5b5b;
  --e-orange: #f39a2e;
  --e-yellow: #f7c531;
  --e-gold: #f2c65a;
  --e-pink: #ff7eb6;
  --e-sky: #4fc3ff;
  --e-sparkles: #ffcf3f, #ff7eb6, #9b7bff, #4fc3ff, #3fd98f, #ff9f43;

  /* battle types: solid (dots, bars), tint (chip fill), ink (text on tint) */
  --e-blast: #ff8a4c;  --e-blast-tint: #ffe6d8;  --e-blast-ink: #9a3a0a;
  --e-life: #4cc184;  --e-life-tint: #d9f3e5;  --e-life-ink: #17703f;
  --e-acid: #a8cf2e;  --e-acid-tint: #eff6cc;  --e-acid-ink: #4f5f00;
  --e-gas: #7da7ff;  --e-gas-tint: #e1eaff;  --e-gas-ink: #2a4fa8;
  --e-crystal: #36c8cc;  --e-crystal-tint: #d5f5f5;  --e-crystal-ink: #0c6669;
  --e-metal: #98a8ba;  --e-metal-tint: #e6ebf1;  --e-metal-ink: #3d5166;
  --e-rare-earth: #a98bf5;  --e-rare-earth-tint: #ece5ff;  --e-rare-earth-ink: #5b3fd0;
  --e-nuclear: #f0bf24;  --e-nuclear-tint: #fff2c4;  --e-nuclear-ink: #755600;
  --e-synthetic: #f07ac0;  --e-synthetic-tint: #fde2f1;  --e-synthetic-ink: #9e1f69;

  /* shape */
  --e-r-xs: 8px;
  --e-r-sm: 12px;
  --e-r: 18px;
  --e-r-lg: 24px;
  --e-r-xl: 32px;
  --e-r-pill: 999px;

  /* depth: white glossy cards with soft layered shadows */
  --e-shadow-sm: 0 8px 18px -10px rgba(58, 38, 120, 0.28), 0 1px 3px rgba(58, 38, 120, 0.06);
  --e-shadow: 0 22px 44px -18px rgba(58, 38, 120, 0.28), 0 3px 10px rgba(58, 38, 120, 0.07);
  --e-shadow-lg: 0 34px 70px -26px rgba(58, 38, 120, 0.4), 0 6px 16px rgba(58, 38, 120, 0.08);
  --e-gloss: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(38, 29, 61, 0.04);
  --e-critter-shadow: drop-shadow(0 14px 14px rgba(40, 28, 90, 0.18));
  --e-focus: 0 0 0 3px rgba(139, 108, 242, 0.45);

  /* type */
  --e-font: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --e-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --e-fs-hero: clamp(46px, 6.6vw, 100px);
  --e-fs-h1: clamp(38px, 5.2vw, 68px);
  --e-fs-h2: clamp(34px, 4.4vw, 60px);
  --e-fs-h3: clamp(19px, 1.6vw, 23px);
  --e-fs-lede: clamp(18px, 1.5vw, 22px);
  --e-fs-body: 18px;
  --e-fs-sm: 15px;
  --e-fs-xs: 13px;

  /* motion */
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --e-out: cubic-bezier(0.22, 1, 0.36, 1);
  --e-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --e-t-fast: 0.18s;
  --e-t: 0.32s;
  --e-t-slow: 0.6s;

  /* layout */
  --e-gutter: clamp(16px, 4vw, 56px);
  --e-max: 1240px;
  --e-nav-h: 64px;
}
[data-type="Blast"] { --t: var(--e-blast); --t-tint: var(--e-blast-tint); --t-ink: var(--e-blast-ink); }
[data-type="Life"] { --t: var(--e-life); --t-tint: var(--e-life-tint); --t-ink: var(--e-life-ink); }
[data-type="Acid"] { --t: var(--e-acid); --t-tint: var(--e-acid-tint); --t-ink: var(--e-acid-ink); }
[data-type="Gas"] { --t: var(--e-gas); --t-tint: var(--e-gas-tint); --t-ink: var(--e-gas-ink); }
[data-type="Crystal"] { --t: var(--e-crystal); --t-tint: var(--e-crystal-tint); --t-ink: var(--e-crystal-ink); }
[data-type="Metal"] { --t: var(--e-metal); --t-tint: var(--e-metal-tint); --t-ink: var(--e-metal-ink); }
[data-type="RareEarth"] { --t: var(--e-rare-earth); --t-tint: var(--e-rare-earth-tint); --t-ink: var(--e-rare-earth-ink); }
[data-type="Nuclear"] { --t: var(--e-nuclear); --t-tint: var(--e-nuclear-tint); --t-ink: var(--e-nuclear-ink); }
[data-type="Synthetic"] { --t: var(--e-synthetic); --t-tint: var(--e-synthetic-tint); --t-ink: var(--e-synthetic-ink); }