/* game/css/theme.css — design tokens and the shared controls (.sl-btn,
   .sl-btn--primary, .sl-icon-btn). Retheme the game here: game.css and the
   editor read every colour, space and corner from these tokens, and --indigo
   is also the colour of the figure the player steers. */

:root {
  color-scheme: light;
  --ink: #1A0D07;
  --slate: #5C4030;
  --indigo: #3D1238;
  --paper: #EDE0C2;
  --paper-warm: #F5EACC;
  --paper-deep: #E4D4A8;
  --card: #FDF4DC;
  --hairline: #C0A070;
  --dragon-red: #6E1A1A;
  --red-soft: #c0392b;
  --sky-solid: #18387A;
  --sky-tint: #D8E4F4;
  --land-solid: #881A0E;
  --light-solid: #7A5C0E;
  --light-tint: #F4EDD0;
  --life-solid: #185830;
  --accent-ghost: rgba(61,18,56,0.09);
  --serif: 'Atkinson Hyperlegible', 'Calibri', sans-serif;
  --sans: 'Atkinson Hyperlegible', 'Calibri', sans-serif;
  --md-primary: var(--indigo);
  --md-state-hover: 0.08;
  --md-corner-xs: 2px;
  --md-corner-s: 4px;
  --md-corner-m: 6px;
  --md-corner-l: 8px;
  --md-corner-full: 999px;
  --md-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --md-dur-short: 100ms;
  --ctl-h: 32px;
  --ctl-pad-x: 12px;
  --ctl-font-size: 0.95rem;
  --ctl-font-weight: 600;
  --ctl-tracking: 0.02em;
  --ctl-border-w: 1px;
  --ctl-ghost-size: 24px;
  --ctl-ghost-opacity: 0.55;
  --ctl-transition: background-color var(--md-dur-short) var(--md-ease-standard), border-color var(--md-dur-short) var(--md-ease-standard), color var(--md-dur-short) var(--md-ease-standard), box-shadow var(--md-dur-short) var(--md-ease-standard), opacity var(--md-dur-short) var(--md-ease-standard);
  --btn-bg: var(--paper-warm);
  --sp-0h: 2px;
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-12: 6rem;
  --header-h: 48px;
}

.sl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  box-sizing: border-box;
  min-height: var(--ctl-h);
  padding: 0 var(--ctl-pad-x);
  font-family: var(--sans);
  font-size: var(--ctl-font-size);
  font-weight: var(--ctl-font-weight);
  letter-spacing: var(--ctl-tracking);
  text-transform: none;
  line-height: 1;
  color: var(--ink);
  background: var(--btn-bg);
  border: var(--ctl-border-w) solid var(--hairline);
  
  position: relative;
  border-radius: 0 var(--md-corner-l) 0 var(--md-corner-l);
  cursor: pointer;
  text-decoration: none;
  transition: var(--ctl-transition);
}

.sl-btn::before,
.sl-btn::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  pointer-events: none;
  opacity: var(--bracket-opacity, 1);
  transition: border-color var(--md-dur-short) var(--md-ease-standard);
}
.sl-btn::before {   
  top: -2px;
  left: -2px;
  border-top: 2px solid var(--bracket-color, var(--hairline));
  border-left: 2px solid var(--bracket-color, var(--hairline));
}
.sl-btn::after {    
  bottom: -2px;
  right: -2px;
  border-bottom: 2px solid var(--bracket-color, var(--hairline));
  border-right: 2px solid var(--bracket-color, var(--hairline));
}
.sl-btn:hover { background: var(--accent-ghost); border-color: var(--indigo); color: var(--indigo); }
.sl-btn:hover::before, .sl-btn:hover::after { --bracket-color: var(--indigo); }
.sl-btn:active { transform: translateY(1px); }
.sl-btn[disabled], .sl-btn[aria-disabled="true"] { opacity: 0.45; cursor: default; }
.sl-btn[disabled]:hover, .sl-btn[aria-disabled="true"]:hover {
  background: var(--btn-bg); border-color: var(--hairline); color: var(--ink);
}
.sl-btn[disabled]::before, .sl-btn[disabled]::after,
.sl-btn[aria-disabled="true"]::before,
.sl-btn[aria-disabled="true"]::after { opacity: 0; }

.sl-btn--primary {
  background: var(--indigo);
  border-color: var(--indigo);
  color: var(--paper);
  --bracket-color: var(--paper);
  --bracket-opacity: 0.5;
}

.sl-btn--primary:hover {
  background: var(--indigo);
  border-color: var(--indigo);
  color: var(--paper);
  box-shadow: inset 0 0 0 999px rgba(255,255,255,var(--md-state-hover));
}

.sl-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: var(--ctl-ghost-size);
  min-height: var(--ctl-ghost-size);
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--md-corner-xs);
  color: var(--slate);
  opacity: var(--ctl-ghost-opacity);
  cursor: pointer;
  line-height: 1;
  transition: var(--ctl-transition);
}
.sl-icon-btn:hover { opacity: 1; color: var(--indigo); background: var(--accent-ghost); }
.sl-icon-btn--danger:hover { color: var(--red-soft, var(--dragon-red)); }
.sl-icon-btn:active { transform: translateY(1px); }

.sl-btn:focus-visible,
.sl-icon-btn:focus-visible {
  outline: 2px solid var(--indigo);
  outline-offset: 2px;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .sl-btn, .sl-icon-btn { transition: none; }
  .sl-btn:active, .sl-icon-btn:active { transform: none; }