/* FAKEMON — design system v0.2 : métal peint, gravure et relief. */
:root {
  color-scheme: dark;
  --fm-bg: #080e16;
  --fm-surface: #14202d;
  --fm-surface-raised: #213243;
  --fm-border: #405364;
  --fm-brass: #ad8950;
  --fm-brass-light: #e4c689;
  --fm-brass-dark: #554229;
  --fm-ivory: #f3e6cc;
  --fm-ink: #090d13;
  --fm-control-border: #7892ad;
  --fm-text: #f5f7ff;
  --fm-muted: #aabbd0;
  --fm-cyan: #2ddbff;
  --fm-gold: #ffd84a;
  --fm-gold-deep: #f5ad32;
  --fm-violet: #b879ff;
  --fm-success: #8be060;
  --fm-error: #ff8792;
  --fm-fire: #ff733f;
  --fm-water: #35baff;
  --fm-nature: #8be060;
  --fm-heart: #ed77d6;
  --fm-stone: #b4adc7;
  /* Type de la gemme jaune à confirmer. */
  --fm-yellow-gem: #ffd84a;
  --fm-font-display: "Barlow Condensed", "Bahnschrift", "Arial Narrow", sans-serif;
  --fm-font-body: "Barlow", "Segoe UI", sans-serif;
  --fm-text-hero: clamp(4.625rem, 7.25vw, 6.625rem);
  --fm-text-title: clamp(2.3125rem, 4.5vw, 3.875rem);
  --fm-text-body: clamp(1rem, 1.4vw, 1.125rem);
  --fm-text-small: 0.875rem;
  --fm-leading-heading: 0.98;
  --fm-leading-body: 1.55;
  --fm-space-1: 0.25rem;
  --fm-space-2: 0.5rem;
  --fm-space-3: 0.75rem;
  --fm-space-4: 1rem;
  --fm-space-6: 1.5rem;
  --fm-space-8: 2rem;
  --fm-space-12: 3rem;
  --fm-space-16: 4rem;
  --fm-space-24: 6rem;
  --fm-radius-small: 0.375rem;
  --fm-radius-control: 0.625rem;
  --fm-radius-card: 0.25rem;
  --fm-cut-small: 8px;
  --fm-cut-large: 22px;
  --fm-texture-grain: url("../assets/ui/grain.svg");
  --fm-texture-scuffs: url("../assets/ui/scuffs.svg");
  --fm-bevel-metal: inset 0 2px 0 #ffffff12, inset 0 -4px 0 #0007, 0 12px 30px #0005;
  --fm-control-height: 3.5rem;
  --fm-content-max: 75rem;
  --fm-shadow-panel: 0 18px 50px rgb(0 0 0 / 30%);
  --fm-glow-cyan: 0 0 24px rgb(45 219 255 / 16%);
  --fm-glow-gold: 0 0 32px rgb(255 216 74 / 14%);
  --fm-focus-ring: 3px solid var(--fm-cyan);
  --fm-motion-fast: 160ms;
  --fm-motion-normal: 240ms;
}

.fm-panel {
  color: var(--fm-text);
  background: var(--fm-texture-scuffs), linear-gradient(145deg, var(--fm-surface-raised), var(--fm-surface) 60%);
  border: 1px solid var(--fm-border);
  border-radius: var(--fm-radius-card);
  box-shadow: var(--fm-bevel-metal);
}

.fm-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: var(--fm-control-height);
  padding: 0.875rem 1.5rem;
  border: 1px solid var(--fm-gold);
  border-radius: var(--fm-radius-control);
  color: var(--fm-bg);
  background: var(--fm-gold);
  box-shadow: inset 0 -3px 0 var(--fm-gold-deep);
  font: 700 1rem/1.25 var(--fm-font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--fm-motion-fast), box-shadow var(--fm-motion-fast);
}

.fm-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: inset 0 -3px 0 var(--fm-gold-deep), var(--fm-glow-gold);
}

.fm-button:active:not(:disabled) { transform: translateY(0); }
.fm-button:disabled { cursor: wait; }

.fm-input {
  width: 100%;
  min-height: var(--fm-control-height);
  padding: 0.875rem 1rem;
  border: 1px solid var(--fm-control-border);
  border-radius: var(--fm-radius-control);
  color: var(--fm-text);
  background: var(--fm-bg);
  font: 400 1rem/1.4 var(--fm-font-body);
}

.fm-input::placeholder { color: var(--fm-muted); opacity: 1; }
.fm-input[aria-invalid="true"] { border: 2px solid var(--fm-error); }
.fm-error { color: var(--fm-error); font-size: var(--fm-text-small); }
.fm-help { color: var(--fm-muted); font-size: var(--fm-text-small); }
.fm-button:focus-visible,
.fm-input:focus-visible,
.fm-link:focus-visible {
  outline: var(--fm-focus-ring);
  outline-offset: 3px;
}
.fm-link { color: var(--fm-cyan); text-underline-offset: 0.2em; }

@media (prefers-reduced-motion: reduce) {
  .fm-button { transition: none; }
  .fm-button:hover:not(:disabled) { transform: none; }
}