/* ==========================================================
   PkOUG Theme Layer (theme.css) — v9
   Goal: readable, consistent typography in BOTH light & dark modes
   - Works with both selectors:
       html[data-theme="light|dark"]
       body.theme-dark
   - Safe overrides for common components across pages
   ========================================================== */

:root{
  --royal-blue: #4169E1;
  --cyan: #00FFFF;

  /* Light theme tokens (default) */
  --bg: #F7FAFF;
  --bg2:#EEF3FF;
  --surface:#FFFFFF;
  --surface-2:#F5F7FB;

  --text:#0B1220;
  --muted: rgba(11,18,32,0.72);
  --muted2: rgba(11,18,32,0.60);

  --border: rgba(11,18,32,0.12);
  --border2: rgba(65,105,225,0.18);

  --link: #1B4FD6;
  --linkHover: #123CA8;

  --shadow: 0 10px 28px rgba(11,18,32,0.10);
  --shadow2: 0 16px 40px rgba(11,18,32,0.12);

  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 12px;

  --focus: 0 0 0 3px rgba(65,105,225,0.18), 0 0 0 6px rgba(0,255,255,0.10);
}

html, body{
  color-scheme: light dark;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-theme="dark"],
body.theme-dark{
  --bg:#070A14;
  --bg2:#0A1633;
  --surface: rgba(12, 16, 28, 0.82);
  --surface-2: rgba(12, 16, 28, 0.62);

  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.72);
  --muted2: rgba(255,255,255,0.62);

  --border: rgba(255,255,255,0.14);
  --border2: rgba(65,105,225,0.22);

  --link: #9AB7FF;
  --linkHover: #C7D7FF;

  --shadow: 0 12px 34px rgba(0,0,0,0.40);
  --shadow2: 0 16px 44px rgba(0,0,0,0.46);
}

/* Base page colors */
body{
  background: var(--bg);
  color: var(--text);
}

/* Headings */
h1,h2,h3,h4,h5,h6,
.section-title,.hero-title{
  color: var(--text);
}

/* Body text */
p,.section-lead,.hero-lead,.card-text{
  color: var(--muted);
}

/* Links */
a{ color: var(--link); }
a:hover{ color: var(--linkHover); }

/* Inputs */
input, select, textarea{
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
}
input::placeholder, textarea::placeholder{
  color: var(--muted2);
}

/* Focus rings (accessible) */
:where(a, button, input, select, textarea):focus-visible{
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--radius-sm);
}

/* Cards / surfaces */
.card, .form-shell, .contact-card, .dir-tools, .profile-card, .sig-card, .cta-banner{
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  border-radius: var(--radius-lg);
}

/* Buttons: keep readable in both themes */
.btn, .submit, button{
  color: inherit;
}
.btn-primary, .submit{
  color: #fff;
}

/* Sponsor tier chips */
.chips{ font-size: 14px; }
.chip-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:10px 12px;
  border-radius:999px;
  background: var(--surface);
  border:1px solid var(--border);
  color: var(--text);
  font-size:13px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  box-sizing:border-box;
}
.chip-btn:hover{
  transform: translateY(-1px);
  border-color: var(--border2);
}
.chip-btn.is-active{
  background: rgba(65,105,225,0.14);
  border-color: rgba(65,105,225,0.34);
  box-shadow: 0 0 0 3px rgba(65,105,225,0.12);
}

/* Tags / badges overflow safety */
.tag, .small-badge, .badge{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Profile cards text clamp */
.profile-top > div{ min-width:0; }
.profile-name, .profile-sub{
  overflow:hidden;
  text-overflow:ellipsis;
}
.profile-sub{ white-space:nowrap; }

/* Page helpers */
.page .kicker, .section-kicker{ color: var(--muted2); }
.page .help{ color: var(--muted2); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
}