/* Veldrath.GameClient.Components — shared VDS design tokens
   Mirrors the :root block from Veldrath.Web/wwwroot/app.css so the embedded
   (Avalonia-hosted) Blazor view renders with matching colours and fonts. */

:root {
  --vds-bg-0: #0C0D13;
  --vds-bg-1: #14151F;
  --vds-bg-2: #1C1D2B;
  --vds-bg-3: #262736;
  --vds-bg-4: #2E2F42;

  --vds-seal-light: #E05545;
  --vds-seal:       #C0392B;
  --vds-seal-dark:  #8C2018;
  --vds-seal-muted: #3D1A16;

  --vds-ember-light: #E05E35;
  --vds-ember:       #CC4125;
  --vds-ember-dark:  #943018;
  --vds-ember-muted: #361A10;

  --vds-gold-muted: #3D3216;

  --vds-text:          #F0EDE8;
  --vds-text-muted:    #A8A09A;
  --vds-text-subtle:   #6E6860;
  --vds-text-disabled: #4A4540;

  --vds-border-subtle: #1E1F2D;
  --vds-border:        #2A2B3D;
  --vds-border-strong: #3D3F58;

  --vds-success:       #5CAB7D;
  --vds-success-muted: #1F3D2E;
  --vds-danger:        #E05252;
  --vds-danger-muted:  #4A1A1A;
  --vds-warning:       #D4964A;
  --vds-warning-muted: #4A3018;
  --vds-info:          #5A9ED6;
  --vds-info-muted:    #1A3250;

  --vds-hover:    #1E2030;
  --vds-pressed:  #252639;
  --vds-selected: #252639;

  --vds-pink: #f472b6;

  --vds-accent: #60A5FA;

  --vds-rarity-common:    #C0C0C0;
  --vds-rarity-uncommon:  #4ADE80;
  --vds-rarity-rare:      #60A5FA;
  --vds-rarity-epic:      #C084FC;
  --vds-rarity-legendary: #FBBF24;

  --vds-tile-grass: #3A3A5C;
  --vds-tile-wall:  #2A1A1A;
  --vds-tile-water: #1A3A5C;
  --vds-tile-door:  #5C4A1A;
  --vds-tile-path:  #4A4A3A;
  --vds-tile-dirt:  #3A2A1A;
  --vds-tile-void:  #0D0D1A;
  --vds-tile-empty: #1A1A2E;

  --vds-indicator-player:   #C9A84C;
  --vds-indicator-occupant: #5A9ED6;
  --vds-indicator-enemy:    #E53935;

  --vds-oauth-discord:   #5865F2;
  --vds-oauth-google:    #4285F4;
  --vds-oauth-microsoft: #0078D4;

  --vds-font-display: 'Cinzel Decorative', 'Cinzel', serif;
  --vds-font-heading: 'Cinzel', serif;
  --vds-font-reading: 'Lora', Georgia, serif;
  --vds-font-body:    'Inter', system-ui, sans-serif;
  --vds-font-mono:    'JetBrains Mono', 'Cascadia Code', monospace;

  --vds-text-xs:   11px;
  --vds-text-sm:   12px;
  --vds-text-base: 14px;
  --vds-text-md:   16px;
  --vds-text-lg:   20px;
  --vds-text-xl:   28px;
  --vds-text-hero: 40px;

  --vds-space-1:  4px;
  --vds-space-2:  8px;
  --vds-space-3:  12px;
  --vds-space-4:  16px;
  --vds-space-5:  20px;
  --vds-space-6:  24px;
  --vds-space-8:  32px;
  --vds-space-10: 40px;
  --vds-space-12: 48px;
  --vds-space-16: 64px;

  --vds-radius-sm:   4px;
  --vds-radius-md:   6px;
  --vds-radius-lg:   8px;
  --vds-radius-full: 9999px;

  --vds-content-max: 1200px;
  --vds-sidebar-w:   220px;
  --vds-topbar-h:    48px;
  --vds-game-footer-h: 44px;
}

/* Base element styles needed by the game UI (mirrors app.css essentials). */
body {
    margin: 0;
    font-family: var(--vds-font-body);
    background: var(--vds-bg-0);
    color: var(--vds-text);
}

h1, h2, h3 { font-family: var(--vds-font-heading); }

a { color: var(--vds-seal-light); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
    display: inline-block;
    padding: .5rem 1.25rem;
    border-radius: var(--vds-radius-md);
    background: var(--vds-bg-2);
    color: var(--vds-text);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--vds-border);
    font-family: var(--vds-font-body);
}

.btn:hover { background: var(--vds-hover); text-decoration: none; }
.btn-primary   { background: var(--vds-seal);             color: #fff; border-color: var(--vds-seal-dark); }
.btn-primary:hover { background: var(--vds-seal-light);   text-decoration: none; }
.btn-discord   { background: var(--vds-oauth-discord);   color: #fff; border: none; }
.btn-google    { background: var(--vds-oauth-google);    color: #fff; border: none; }
.btn-microsoft { background: var(--vds-oauth-microsoft); color: #fff; border: none; }

/* Blazor error UI — uses MudBlazor palette tokens for border/color per app.css conventions. */
#blazor-error-ui {
    background: var(--vds-danger-muted, #4A1A1A); bottom: 0; box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    display: none; left: 0; padding: .6rem 1.25rem .7rem; position: fixed; width: 100%; z-index: 1000;
    border-top: 1px solid var(--mud-palette-error, #E05252); color: var(--mud-palette-error, #E05252);
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: .75rem; top: .5rem; }