/* Thingdoms shared stylesheet — rules copied verbatim from the main site
   (index.css, Header.css, pages/Info.css, pages/Detail.css). Single source
   of truth for the studio/console so styling stays consistent. */

:root{
  --bg-color:#ffffff; --text-color:#000000; --text-color-secondary:#444444;
  --text-color-muted:#c5cdd4; --border-color:#000000; --input-bg:#ffffff;
  --input-border:#000000; --button-bg:#f7f7f7; --button-border:#cccccc;
  --button-active-bg:#222222; --button-active-text:#ffffff;
  --placeholder-bg:#e0e0e0; --link-hover:#444444; --hover-color:#444444;
}
body.dark-mode{
  --bg-color:#1a1a1a; --text-color:#ffffff; --text-color-secondary:#b0b0b0;
  --text-color-muted:#6b6b6b; --border-color:#4a4a4a; --input-bg:#2a2a2a;
  --input-border:#4a4a4a; --button-bg:#2a2a2a; --button-border:#4a4a4a;
  --button-active-bg:#4a4a4a; --link-hover:#b0b0b0; --hover-color:#b0b0b0;
}

*{box-sizing:border-box}
body{
  margin:0; padding:24px; color:var(--text-color); background:var(--bg-color);
  font-family:Helvetica,Arial,sans-serif;
  transition:background-color .3s ease,color .3s ease;
}
a{color:var(--text-color);text-decoration:none}

/* ---- type scale ---- */
.title,.sub-title{font-size:17.6px;font-weight:bold;letter-spacing:.05em;}
.title{text-transform:uppercase}
.title-link-secondary{font-weight:normal;text-transform:none;margin-top:8px}
.body-text{font-size:17.6px;line-height:1.4;font-weight:400}
.caption-text{font-size:14.4px;line-height:1.2;font-weight:400}
.bold-text{font-weight:600}

/* ---- title wordmark (Header.css) ---- */
.title-link{position:relative;text-decoration:none;color:inherit}
.title-text{display:inline-block;transition:opacity .3s ease}
.title-letter{display:inline-block;transition:color .3s ease,transform .3s ease}
.title-link:hover .title-letter{
  animation:rainbow-wave 1.5s ease-in-out infinite, bounce-wave 1.5s ease-in-out infinite;
  animation-delay:calc(var(--letter-index) * .1s), calc(var(--letter-index) * .1s);
}
@keyframes rainbow-wave{0%{color:#ffc964}25%{color:#d65952}50%{color:#7ec28a}75%{color:#6ba1cf}100%{color:#a089f1}}
@keyframes bounce-wave{0%,100%{transform:translateY(0)}25%{transform:translateY(-3px)}50%{transform:translateY(0)}75%{transform:translateY(-1px)}}

/* ---- page container (App.css) ---- */
.home-container{position:relative;font-family:Arial,sans-serif}
.home-container.small-width{max-width:500px}
.app-header{margin-bottom:40px;min-height:48px;position:relative}

/* ---- link list — exact /info pattern (Info.css .info-links + Header.css .title-link-secondary) ---- */
.info-links{list-style:none;padding:0;margin:24px 0 0}
.info-links li{margin-top:2px}
.info-links li:first-child{margin-top:0}
.info-links li a{text-decoration:none;color:var(--text-color-muted);font-weight:600;font-size:17.6px}
.info-links li a:hover{color:var(--hover-color)}
.info-links li a:hover .title-letter{
  animation:rainbow-wave 1.5s ease-in-out infinite, bounce-wave 1.5s ease-in-out infinite;
  animation-delay:calc(var(--letter-index) * .05s), calc(var(--letter-index) * .05s);
}
.info-links li.disabled a{color:var(--text-color-muted);opacity:.45;pointer-events:none}

/* ---- superscript tag (Detail.css .pool-tag) ---- */
.pool-tag{font-size:9px;font-weight:400;color:#a9a9a9;margin-left:4px;vertical-align:super;letter-spacing:.02em;text-transform:uppercase}

/* ---- data table (Detail.css .trait-data) ---- */
.data{display:grid;grid-template-columns:1fr;border-top:1.5px solid var(--border-color);border-left:1.5px solid var(--border-color);margin-top:8px;max-width:560px}
.data-cell{border-right:1.5px solid var(--border-color);border-bottom:1.5px solid var(--border-color);padding:6px 8px;grid-column:1 / -1}
.data-cell-label{font-size:14.4px;font-weight:700;color:#a9a9a9;margin-bottom:1px}
.data-cell-value{font-size:14.4px;font-weight:400;color:var(--text-color)}
.csw{display:inline-block;width:10px;height:10px;margin:0 3px 0 1px;vertical-align:middle;border:1.5px solid var(--border-color)}

/* ---- dark-mode toggle (Header.css) ---- */
.dark-mode-toggle{position:fixed;top:24px;right:24px;background:none;border:none;cursor:pointer;padding:0;opacity:.7;height:20px;width:20px;display:flex;align-items:center;justify-content:center;color:var(--text-color);transition:opacity .3s ease,color .3s ease;z-index:1000}
.dark-mode-toggle:hover{opacity:1}
.dark-mode-toggle svg{width:100%;height:100%}