/*
 * Odyssey Database V2.13.2 — Design System Foundation
 * Phase 1: tokens, typography, spacing, surfaces, controls and motion.
 * This file intentionally loads after legacy component styles as a safe,
 * non-functional UI normalization layer.
 */
:root{
  color-scheme:dark;

  /* Color foundation */
  --od-color-bg-950:#060807;
  --od-color-bg-900:#090c0a;
  --od-color-bg-850:#0d110e;
  --od-color-surface-800:#111713;
  --od-color-surface-750:#151c17;
  --od-color-surface-700:#1a211b;
  --od-color-gold-500:#c6a45c;
  --od-color-gold-400:#ddc17d;
  --od-color-gold-300:#f0dca9;
  --od-color-text-100:#f2eee4;
  --od-color-text-300:#c9c3b7;
  --od-color-text-500:#97978f;
  --od-color-text-700:#6e746f;
  --od-color-line-soft:rgba(205,178,112,.14);
  --od-color-line:rgba(205,178,112,.28);
  --od-color-line-strong:rgba(221,193,125,.55);
  --od-color-success:#8fb695;
  --od-color-warning:#d4aa63;
  --od-color-danger:#c47770;
  --od-color-info:#829caf;

  /* Compatibility aliases */
  --bg:var(--od-color-bg-950);
  --bg-soft:var(--od-color-bg-850);
  --panel:var(--od-color-surface-800);
  --panel-2:var(--od-color-surface-750);
  --line:var(--od-color-line);
  --line-strong:var(--od-color-line-strong);
  --gold:var(--od-color-gold-500);
  --gold-soft:var(--od-color-gold-300);
  --text:var(--od-color-text-100);
  --muted:var(--od-color-text-500);
  --success:var(--od-color-success);

  /* Typography */
  --od-font-sans:"Microsoft JhengHei","PingFang TC","Noto Sans TC",Arial,sans-serif;
  --od-font-serif:Georgia,"Noto Serif TC","Songti TC",serif;
  --od-text-xs:.75rem;
  --od-text-sm:.875rem;
  --od-text-md:1rem;
  --od-text-lg:1.125rem;
  --od-text-xl:1.25rem;
  --od-text-2xl:clamp(1.5rem,2.2vw,2rem);
  --od-text-3xl:clamp(2rem,4vw,3.25rem);
  --od-leading-tight:1.25;
  --od-leading-normal:1.65;
  --od-leading-relaxed:1.85;
  --od-tracking-label:.18em;

  /* Spacing */
  --od-space-1:.25rem;
  --od-space-2:.5rem;
  --od-space-3:.75rem;
  --od-space-4:1rem;
  --od-space-5:1.25rem;
  --od-space-6:1.5rem;
  --od-space-8:2rem;
  --od-space-10:2.5rem;
  --od-space-12:3rem;
  --od-space-16:4rem;
  --od-space-20:5rem;

  /* Shape, elevation and layout */
  --od-radius-sm:4px;
  --od-radius-md:8px;
  --od-radius-lg:14px;
  --od-radius-pill:999px;
  --od-shadow-sm:0 8px 24px rgba(0,0,0,.18);
  --od-shadow-md:0 18px 48px rgba(0,0,0,.28);
  --od-shadow-lg:0 28px 80px rgba(0,0,0,.42);
  --od-focus:0 0 0 3px rgba(221,193,125,.2);
  --od-container:1200px;
  --od-content:920px;
  --od-transition-fast:150ms ease;
  --od-transition-base:220ms ease;
  --radius:var(--od-radius-sm);
  --shadow:var(--od-shadow-lg);
  --container:var(--od-container);
}

html{font-size:16px;background:var(--od-color-bg-950)}
body{
  background:
    radial-gradient(circle at 50% -14%,rgba(94,111,91,.17),transparent 34rem),
    linear-gradient(180deg,var(--od-color-bg-900),var(--od-color-bg-950) 42rem);
  color:var(--od-color-text-100);
  font-family:var(--od-font-sans);
  line-height:var(--od-leading-normal);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a,button,input,select,textarea{transition:border-color var(--od-transition-fast),background-color var(--od-transition-fast),color var(--od-transition-fast),box-shadow var(--od-transition-fast),transform var(--od-transition-base),opacity var(--od-transition-fast)}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:0;box-shadow:var(--od-focus)}

/* Type rhythm */
h1,h2,h3,h4,h5,h6{margin-block-start:0;color:var(--od-color-text-100);line-height:var(--od-leading-tight);text-wrap:balance}
h1{font-family:var(--od-font-serif);font-size:var(--od-text-3xl);font-weight:500;letter-spacing:.025em}
h2{font-family:var(--od-font-serif);font-size:var(--od-text-2xl);font-weight:500;letter-spacing:.02em}
h3{font-size:var(--od-text-xl);font-weight:600}
p{max-width:72ch}
.eyebrow,[class*="__tag"],[class*="-tag"]{letter-spacing:var(--od-tracking-label)}

/* Layout primitives */
.container{width:min(var(--od-container),calc(100% - clamp(24px,5vw,64px)))}
.section{padding-block:clamp(var(--od-space-12),7vw,var(--od-space-20))}
.page{padding-block:clamp(var(--od-space-10),6vw,var(--od-space-16))}
.section-heading{gap:var(--od-space-8);margin-bottom:var(--od-space-8)}
.section-heading p{color:var(--od-color-text-500)}

/* Shared surfaces */
.panel,.card,.home-feature,.home-codex-card,.global-search-result,
[class$="-panel"],[class$="__panel"]{
  border-color:var(--od-color-line);
}
.panel,.card{
  border-radius:var(--od-radius-md);
  background:linear-gradient(145deg,rgba(24,31,26,.92),rgba(11,15,12,.96));
  box-shadow:var(--od-shadow-sm);
}
.card,.home-codex-card,.global-search-result{
  will-change:transform;
}
.card:hover,.home-codex-card:hover,.global-search-result:hover{
  transform:translateY(-4px);
  border-color:var(--od-color-line-strong);
  box-shadow:var(--od-shadow-md);
}

/* Buttons */
.od-btn,.btn,button[type="submit"],input[type="submit"]{
  min-height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--od-space-2);
  padding:.68rem 1rem;
  border:1px solid var(--od-color-line-strong);
  border-radius:var(--od-radius-sm);
  background:linear-gradient(180deg,rgba(198,164,92,.18),rgba(198,164,92,.08));
  color:var(--od-color-gold-300);
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
}
.od-btn:hover,.btn:hover,button[type="submit"]:hover,input[type="submit"]:hover{
  transform:translateY(-1px);
  border-color:var(--od-color-gold-400);
  background:linear-gradient(180deg,rgba(198,164,92,.26),rgba(198,164,92,.12));
}
.od-btn--secondary{
  border-color:var(--od-color-line);
  background:var(--od-color-surface-750);
  color:var(--od-color-text-300);
}
.od-btn--ghost{background:transparent;border-color:transparent;color:var(--od-color-text-300)}
.od-btn:disabled,.btn:disabled,button:disabled,input:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* Form controls */
input[type="text"],input[type="search"],input[type="password"],input[type="number"],input[type="email"],select,textarea{
  min-height:44px;
  width:100%;
  border:1px solid var(--od-color-line);
  border-radius:var(--od-radius-sm);
  background:rgba(5,8,6,.76);
  color:var(--od-color-text-100);
  padding:.7rem .85rem;
}
textarea{min-height:120px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--od-color-text-700)}
input:hover,select:hover,textarea:hover{border-color:var(--od-color-line-strong)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--od-color-gold-400);box-shadow:var(--od-focus)}
label{color:var(--od-color-text-300)}

/* Header and navigation normalization */
.site-header{background:rgba(6,9,7,.86);border-bottom-color:var(--od-color-line-soft);box-shadow:0 10px 32px rgba(0,0,0,.12)}
.site-header__inner{min-height:72px}
.brand__mark{border-radius:var(--od-radius-sm);background:linear-gradient(145deg,rgba(198,164,92,.12),transparent)}
.brand__text strong{font-family:var(--od-font-serif);font-weight:500}
.nav-panel{border-radius:var(--od-radius-md);border-color:var(--od-color-line);box-shadow:var(--od-shadow-lg)}
.nav-search-link{border-radius:var(--od-radius-sm)}

/* Footer normalization */
.site-footer{border-top-color:var(--od-color-line-soft);background:linear-gradient(180deg,#080b09,#050706)}
.version-badge{border-radius:var(--od-radius-pill)}

/* Status and utility styles */
.od-badge,.status,.tag{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:.25rem .55rem;
  border:1px solid var(--od-color-line);
  border-radius:var(--od-radius-pill);
  background:rgba(255,255,255,.025);
  color:var(--od-color-text-300);
  font-size:var(--od-text-xs);
}
.od-divider{height:1px;border:0;background:var(--od-color-line-soft);margin-block:var(--od-space-8)}
.od-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Motion */
@keyframes od-fade-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.od-animate-in{animation:od-fade-up .45s ease both}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* Responsive floor */
@media(max-width:820px){
  .site-header__inner{min-height:64px}
  .section{padding-block:var(--od-space-12)}
}
@media(max-width:520px){
  .container{width:min(100% - 22px,var(--od-container))}
  h1{font-size:clamp(1.85rem,10vw,2.5rem)}
  h2{font-size:clamp(1.4rem,7vw,1.85rem)}
  .section{padding-block:var(--od-space-10)}
}