/* =========================================================
   Monster Muse design tokens - the single source of truth.

   This file is the ONLY place in the dashboard where a colour is written as a value
   (tests/MonsterMuse.Logic.Tests/DesignSystemTests enforces it). Everything else says var(--...).

   Two vocabularies on one block, as in the game's own art direction (bright card-battle cartoon):

     1. --mm-*   Primitives (the raw brand palette, spacing, radii, type, motion) and the
                  semantic layer on top of them (bg / text / border / action / status / series).
                  Names read like design variables: --mm-bg-page, --mm-text-muted ...

     2. Short aliases (--ink, --line, --yellow, --good, --r-md, --sp-4 ...) that the
                  stylesheets are written against. Every alias resolves to an --mm-* token,
                  so changing a primitive reaches every rule.

   Brand in one line: logo yellow is the main action, logo red is danger and alerts, jungle green is
   success, sky blue is secondary and links, summon pink is the accent, ink and stone greys carry the page;
   the rail is ink. Data colours: the three elements (Fire red, Water blue, Wind green, as on the card
   frames), the nine rarities C … UR+, and ten hues for things that only need to look different (avatars).
   ========================================================= */

@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-extrabold-italic.woff2') format('woff2');font-weight:800;font-style:italic;font-display:swap;}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'IBM Plex Mono';src:url('../fonts/ibm-plex-mono-medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}

:root{
  /* ---- Primitives: brand ---- */
  --mm-yellow-100:#FFF7CC; --mm-yellow-300:#FFE566; --mm-yellow-500:#FFD200; --mm-yellow-600:#E0B800; --mm-yellow-700:#8A6A00;
  --mm-red-100:#FDE9E8;    --mm-red-500:#E2231A;    --mm-red-600:#B81C15;    --mm-red-700:#8C150F;
  --mm-green-100:#E1F5EA;  --mm-green-500:#00A04E;  --mm-green-600:#008241;  --mm-green-700:#006233;
  --mm-blue-100:#E7EEFB;   --mm-blue-500:#1B5FD1;   --mm-blue-600:#164DAA;   --mm-blue-700:#103A80;
  --mm-pink-100:#FCE7F2;   --mm-pink-500:#E0338F;   --mm-pink-600:#B82873;

  /* ---- Primitives: ink and tarmac ---- */
  --mm-white:#FFFFFF;
  --mm-grey-100:#F5F6F8;   /* page */
  --mm-grey-200:#EEF0F3;   /* soft fill */
  --mm-grey-300:#E4E7EB;   /* lines */
  --mm-grey-400:#C9CED5;   /* strong lines, disabled */
  --mm-grey-500:#8A9099;   /* muted text */
  --mm-ink-600:#4E555E;    /* secondary text (ink-2) */
  --mm-ink-800:#2B3038;    /* rail hover */
  --mm-ink-900:#1D2127;    /* ink, the race rail */
  --mm-ink-950:#15181D;    /* rail edge, candy edge of a dark button */

  /* ---- Primitives: data ---- */
  /* Elements, as the card frames: fire, water, wind (GameConfig.Elements order) */
  --mm-fire:#E8452C; --mm-water:#2A7DE1; --mm-wind:#3FA535;
  /* Rarities in game order: C, U, U+, R, R+, SR, SR+, UR, UR+ (GameConfig.RarityOrder) */
  --mm-rarity-c:#9AA1AA; --mm-rarity-u:#3FA535; --mm-rarity-u-plus:#1E8C6E; --mm-rarity-r:#2A7DE1; --mm-rarity-r-plus:#1C4FB0;
  --mm-rarity-sr:#8E4FD0; --mm-rarity-sr-plus:#C23BB0; --mm-rarity-ur:#E5A800; --mm-rarity-ur-plus:#E8452C;
  /* Ten hues with no meaning (avatars, things that only need to look different) */
  --mm-hue-0:#4F7CAC; --mm-hue-1:#00A6A6; --mm-hue-2:#8E6CC8; --mm-hue-3:#3747C4; --mm-hue-4:#00B4D8;
  --mm-hue-5:#F4A261; --mm-hue-6:#E63946; --mm-hue-7:#80B918; --mm-hue-8:#FF006E; --mm-hue-9:#FFBE0B;

  /* ---- Primitives: translucent (shadows, scrims, focus) ---- */
  --mm-shadow-color:rgba(29,33,39,0.08);
  --mm-shadow-color-strong:rgba(29,33,39,0.22);
  --mm-scrim-color:rgba(21,24,29,0.46);
  --mm-focus-color:rgba(27,95,209,0.28);
  --mm-rail-line:rgba(255,255,255,0.08);
  --mm-rail-hover:rgba(255,255,255,0.06);
  --mm-rail-text-muted:rgba(255,255,255,0.56);
  --mm-highlight:rgba(255,255,255,0.35);

  /* ---- Semantic colour, light theme ---- */
  --mm-bg-page:var(--mm-grey-100);
  --mm-bg-surface:var(--mm-white);
  --mm-bg-soft:var(--mm-grey-200);
  --mm-bg-hover:var(--mm-grey-100);
  --mm-bg-inverse:var(--mm-ink-900);
  --mm-bg-inverse-edge:var(--mm-ink-950);
  --mm-bg-inverse-hover:var(--mm-ink-800);
  --mm-bg-selected:var(--mm-yellow-100);

  --mm-text-primary:var(--mm-ink-900);
  --mm-text-secondary:var(--mm-ink-600);
  --mm-text-muted:var(--mm-grey-500);
  --mm-text-inverse:var(--mm-white);
  --mm-text-inverse-muted:var(--mm-rail-text-muted);
  --mm-text-link:var(--mm-blue-500);
  --mm-text-link-hover:var(--mm-blue-700);

  --mm-border-subtle:var(--mm-grey-200);
  --mm-border-default:var(--mm-grey-300);
  --mm-border-strong:var(--mm-grey-400);
  --mm-border-focus:var(--mm-blue-500);

  --mm-action-primary:var(--mm-yellow-500);          /* logo yellow: the one main action */
  --mm-action-primary-edge:var(--mm-yellow-600);     /* the candy button's darker bottom edge */
  --mm-action-primary-text:var(--mm-ink-900);
  --mm-action-secondary:var(--mm-white);
  --mm-action-secondary-edge:var(--mm-grey-400);
  --mm-action-strong:var(--mm-ink-900);
  --mm-action-strong-edge:var(--mm-ink-950);
  --mm-action-danger:var(--mm-red-500);
  --mm-action-danger-edge:var(--mm-red-700);

  --mm-status-success:var(--mm-green-500);  --mm-status-success-soft:var(--mm-green-100);  --mm-status-success-text:var(--mm-green-700);
  --mm-status-warning:var(--mm-yellow-500); --mm-status-warning-soft:var(--mm-yellow-100); --mm-status-warning-text:var(--mm-yellow-700);
  --mm-status-danger:var(--mm-red-500);     --mm-status-danger-soft:var(--mm-red-100);     --mm-status-danger-text:var(--mm-red-700);
  --mm-status-info:var(--mm-blue-500);      --mm-status-info-soft:var(--mm-blue-100);      --mm-status-info-text:var(--mm-blue-700);
  --mm-status-accent:var(--mm-pink-500);    --mm-status-accent-soft:var(--mm-pink-100);    --mm-status-accent-text:var(--mm-pink-600);
  --mm-status-idle:var(--mm-grey-500);

  /* Chart series, in the order a chart takes them (series 1 is the main line). */
  --mm-series-1:var(--mm-blue-500);
  --mm-series-2:var(--mm-green-500);
  --mm-series-3:var(--mm-red-500);
  --mm-series-4:var(--mm-yellow-600);
  --mm-series-5:var(--mm-pink-500);
  --mm-series-6:var(--mm-hue-2);
  --mm-series-7:var(--mm-hue-1);
  --mm-series-8:var(--mm-hue-5);

  /* ---- Spacing (4pt) and sizing ---- */
  --mm-space-0:0px; --mm-space-1:4px; --mm-space-2:8px; --mm-space-3:12px; --mm-space-4:16px; --mm-space-5:20px;
  --mm-space-6:24px; --mm-space-8:32px; --mm-space-10:40px; --mm-space-12:48px; --mm-space-16:64px;
  --mm-size-control-sm:28px; --mm-size-control-md:36px; --mm-size-control-lg:44px;
  --mm-size-icon-sm:14px; --mm-size-icon-md:16px; --mm-size-icon-lg:20px;
  --mm-size-rail:240px; --mm-size-rail-collapsed:64px; --mm-size-topbar:56px; --mm-size-content:1440px;
  --mm-size-stroke:1px; --mm-size-candy-edge:3px;

  /* ---- Radius ---- */
  --mm-radius-none:0; --mm-radius-xs:3px; --mm-radius-sm:5px; --mm-radius-md:8px; --mm-radius-lg:12px; --mm-radius-xl:16px; --mm-radius-full:999px;

  /* ---- Typography ---- */
  --mm-font-display:'Barlow Condensed', 'Arial Narrow', 'Segoe UI', sans-serif;   /* ExtraBold Italic: titles, big numbers */
  --mm-font-label:'Barlow Condensed', 'Arial Narrow', 'Segoe UI', sans-serif;     /* SemiBold, uppercase: eyebrows, table heads */
  --mm-font-body:'Barlow', 'Segoe UI', system-ui, sans-serif;
  --mm-font-mono:'IBM Plex Mono', ui-monospace, Consolas, monospace;              /* ids, numbers in tables, JSON */
  --mm-font-size-2xs:11px; --mm-font-size-xs:12px; --mm-font-size-sm:13px; --mm-font-size-md:14px; --mm-font-size-lg:16px;
  --mm-font-size-xl:18px; --mm-font-size-2xl:22px; --mm-font-size-3xl:28px; --mm-font-size-4xl:36px; --mm-font-size-5xl:48px;
  --mm-line-height-tight:1.1; --mm-line-height-snug:1.3; --mm-line-height-normal:1.5;
  --mm-letter-spacing-label:0.06em;

  /* ---- Elevation ---- */
  --mm-shadow-sm:0 1px 2px var(--mm-shadow-color);
  --mm-shadow-md:0 1px 2px var(--mm-shadow-color), 0 8px 24px -12px var(--mm-shadow-color-strong);
  --mm-shadow-lg:0 2px 4px var(--mm-shadow-color), 0 24px 64px -20px var(--mm-shadow-color-strong);

  /* ---- Motion ---- */
  --mm-ease:cubic-bezier(0.2, 0.8, 0.2, 1);
  --mm-ease-out:cubic-bezier(0.16, 1, 0.3, 1);
  --mm-duration-fast:120ms; --mm-duration:200ms; --mm-duration-slow:320ms;

  /* =====================================================
     Short aliases: what the stylesheets are written against.
     ===================================================== */
  --page:var(--mm-bg-page);
  --surface:var(--mm-bg-surface);
  --soft:var(--mm-bg-soft);
  --hover:var(--mm-bg-hover);
  --selected:var(--mm-bg-selected);
  --ink:var(--mm-text-primary);
  --ink-2:var(--mm-text-secondary);
  --muted:var(--mm-text-muted);
  --on-dark:var(--mm-text-inverse);
  --on-dark-2:var(--mm-text-inverse-muted);
  --link:var(--mm-text-link);
  --link-hover:var(--mm-text-link-hover);
  --line:var(--mm-border-default);
  --line-soft:var(--mm-border-subtle);
  --line-strong:var(--mm-border-strong);

  --yellow:var(--mm-yellow-500);
  --red:var(--mm-red-500);
  --green:var(--mm-green-500);
  --blue:var(--mm-blue-500);
  --pink:var(--mm-pink-500);

  --good:var(--mm-status-success);  --good-soft:var(--mm-status-success-soft);  --good-ink:var(--mm-status-success-text);
  --warn:var(--mm-status-warning);  --warn-soft:var(--mm-status-warning-soft);  --warn-ink:var(--mm-status-warning-text);
  --bad:var(--mm-status-danger);    --bad-soft:var(--mm-status-danger-soft);    --bad-ink:var(--mm-status-danger-text);
  --info:var(--mm-status-info);     --info-soft:var(--mm-status-info-soft);     --info-ink:var(--mm-status-info-text);
  --accent:var(--mm-status-accent); --accent-soft:var(--mm-status-accent-soft); --accent-ink:var(--mm-status-accent-text);
  --idle:var(--mm-status-idle);

  --btn-primary:var(--mm-action-primary); --btn-primary-edge:var(--mm-action-primary-edge); --btn-primary-ink:var(--mm-action-primary-text);
  --btn-secondary:var(--mm-action-secondary); --btn-secondary-edge:var(--mm-action-secondary-edge);
  --btn-strong:var(--mm-action-strong); --btn-strong-edge:var(--mm-action-strong-edge);
  --btn-danger:var(--mm-action-danger); --btn-danger-edge:var(--mm-action-danger-edge);

  --rail-bg:var(--mm-bg-inverse);
  --rail-edge:var(--mm-bg-inverse-edge);
  --rail-hover:var(--mm-rail-hover);
  --rail-line:var(--mm-rail-line);
  --highlight:var(--mm-highlight);

  --c1:var(--mm-series-1); --c2:var(--mm-series-2); --c3:var(--mm-series-3); --c4:var(--mm-series-4);
  --c5:var(--mm-series-5); --c6:var(--mm-series-6); --c7:var(--mm-series-7); --c8:var(--mm-series-8);
  --hue-0:var(--mm-hue-0); --hue-1:var(--mm-hue-1); --hue-2:var(--mm-hue-2); --hue-3:var(--mm-hue-3); --hue-4:var(--mm-hue-4);
  --hue-5:var(--mm-hue-5); --hue-6:var(--mm-hue-6); --hue-7:var(--mm-hue-7); --hue-8:var(--mm-hue-8); --hue-9:var(--mm-hue-9);
  --element-0:var(--mm-fire); --element-1:var(--mm-water); --element-2:var(--mm-wind);
  --rarity-0:var(--mm-rarity-c); --rarity-1:var(--mm-rarity-u); --rarity-2:var(--mm-rarity-u-plus); --rarity-3:var(--mm-rarity-r); --rarity-4:var(--mm-rarity-r-plus);
  --rarity-5:var(--mm-rarity-sr); --rarity-6:var(--mm-rarity-sr-plus); --rarity-7:var(--mm-rarity-ur); --rarity-8:var(--mm-rarity-ur-plus);

  --sp-1:var(--mm-space-1); --sp-2:var(--mm-space-2); --sp-3:var(--mm-space-3); --sp-4:var(--mm-space-4); --sp-5:var(--mm-space-5);
  --sp-6:var(--mm-space-6); --sp-8:var(--mm-space-8); --sp-10:var(--mm-space-10); --sp-12:var(--mm-space-12);
  --r-xs:var(--mm-radius-xs); --r-sm:var(--mm-radius-sm); --r-md:var(--mm-radius-md); --r-lg:var(--mm-radius-lg); --r-xl:var(--mm-radius-xl); --r-full:var(--mm-radius-full);
  --ctl-sm:var(--mm-size-control-sm); --ctl-md:var(--mm-size-control-md); --ctl-lg:var(--mm-size-control-lg);
  --edge:var(--mm-size-candy-edge);
  --rail-w:var(--mm-size-rail); --topbar-h:var(--mm-size-topbar); --maxw:var(--mm-size-content);

  --font-display:var(--mm-font-display);
  --font-label:var(--mm-font-label);
  --font-body:var(--mm-font-body);
  --font-mono:var(--mm-font-mono);
  --fs-2xs:var(--mm-font-size-2xs); --fs-xs:var(--mm-font-size-xs); --fs-sm:var(--mm-font-size-sm); --fs-md:var(--mm-font-size-md);
  --fs-lg:var(--mm-font-size-lg); --fs-xl:var(--mm-font-size-xl); --fs-2xl:var(--mm-font-size-2xl); --fs-3xl:var(--mm-font-size-3xl);
  --fs-4xl:var(--mm-font-size-4xl); --fs-5xl:var(--mm-font-size-5xl);
  --tracking-label:var(--mm-letter-spacing-label);

  --shadow-sm:var(--mm-shadow-sm); --shadow-md:var(--mm-shadow-md); --shadow-lg:var(--mm-shadow-lg);
  --scrim:var(--mm-scrim-color);
  --focus-ring:0 0 0 3px var(--mm-focus-color);
  --ease:var(--mm-ease); --ease-out:var(--mm-ease-out);
  --t-fast:var(--mm-duration-fast); --t:var(--mm-duration); --t-slow:var(--mm-duration-slow);
}

/* Dark theme: a hook, not shipped. The dashboard is light by design (an operator tool read in daylight next to
   the game's bright art); the rail is already dark. Setting data-theme="dark" on <html> swaps the semantic layer
   only; primitives, brand colours and data colours stay. Before shipping it, check every chip and chart on it. */
:root[data-theme="dark"]{
  --mm-bg-page:var(--mm-ink-950);
  --mm-bg-surface:var(--mm-ink-900);
  --mm-bg-soft:var(--mm-ink-800);
  --mm-bg-hover:var(--mm-ink-800);
  --mm-text-primary:var(--mm-grey-100);
  --mm-text-secondary:var(--mm-grey-400);
  --mm-text-muted:var(--mm-grey-500);
  --mm-border-subtle:var(--mm-ink-800);
  --mm-border-default:var(--mm-ink-600);
  --mm-border-strong:var(--mm-grey-500);
  --mm-action-secondary:var(--mm-ink-800);
  --mm-action-secondary-edge:var(--mm-ink-950);
}