/* Pokemon type colors */
:root {
  --type-normal: #A8A77A;
  --type-fire: #EE8130;
  --type-water: #6390F0;
  --type-electric: #F7D02C;
  --type-grass: #7AC74C;
  --type-ice: #96D9D6;
  --type-fighting: #C22E28;
  --type-poison: #A33EA1;
  --type-ground: #E2BF65;
  --type-flying: #A98FF3;
  --type-psychic: #F95587;
  --type-bug: #A6B91A;
  --type-rock: #B6A136;
  --type-ghost: #735797;
  --type-dragon: #6F35FC;
  --type-dark: #705746;
  --type-steel: #B7B7CE;
  --type-fairy: #D685AD;
}

.type-color--normal { background: var(--type-normal); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.type-color--fire { background: var(--type-fire); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.type-color--water { background: var(--type-water); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.type-color--electric { background: var(--type-electric); color: #333; text-shadow: none; }
.type-color--grass { background: var(--type-grass); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.type-color--ice { background: var(--type-ice); color: #333; text-shadow: none; }
.type-color--fighting { background: var(--type-fighting); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.type-color--poison { background: var(--type-poison); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.type-color--ground { background: var(--type-ground); color: #333; text-shadow: none; }
.type-color--flying { background: var(--type-flying); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.type-color--psychic { background: var(--type-psychic); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.type-color--bug { background: var(--type-bug); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.type-color--rock { background: var(--type-rock); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.type-color--ghost { background: var(--type-ghost); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.type-color--dragon { background: var(--type-dragon); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.type-color--dark { background: var(--type-dark); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }
.type-color--steel { background: var(--type-steel); color: #333; text-shadow: none; }
.type-color--fairy { background: var(--type-fairy); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }

/* Type-themed pages: set --primary to the type color */
[data-type-theme="normal"]   { --primary: var(--type-normal); }
[data-type-theme="fire"]     { --primary: var(--type-fire); }
[data-type-theme="water"]    { --primary: var(--type-water); }
[data-type-theme="electric"] { --primary: var(--type-electric); }
[data-type-theme="grass"]    { --primary: var(--type-grass); }
[data-type-theme="ice"]      { --primary: var(--type-ice); }
[data-type-theme="fighting"] { --primary: var(--type-fighting); }
[data-type-theme="poison"]   { --primary: var(--type-poison); }
[data-type-theme="ground"]   { --primary: var(--type-ground); }
[data-type-theme="flying"]   { --primary: var(--type-flying); }
[data-type-theme="psychic"]  { --primary: var(--type-psychic); }
[data-type-theme="bug"]      { --primary: var(--type-bug); }
[data-type-theme="rock"]     { --primary: var(--type-rock); }
[data-type-theme="ghost"]    { --primary: var(--type-ghost); }
[data-type-theme="dragon"]   { --primary: var(--type-dragon); }
[data-type-theme="dark"]     { --primary: var(--type-dark); }
[data-type-theme="steel"]    { --primary: var(--type-steel); }
[data-type-theme="fairy"]    { --primary: var(--type-fairy); }

/* Type card (for type browser grid) */
.type-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  border-radius: var(--radius-large);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
  min-height: 100px;
}

.type-card small {
  font-weight: 400;
  font-size: 0.85rem;
  opacity: 0.9;
}

.type-card:hover {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* Light-background types stay dark on hover */
.type-color--electric:hover,
.type-color--ice:hover,
.type-color--ground:hover,
.type-color--steel:hover {
  color: #333;
  text-shadow: none;
}