/* =========================================================
   5th SFG(A) — Professional Theme (FULL CSS)
   - Dark/Light tokens
   - Camo gutters
   - Hero, Buttons, Cards, Tables, Dropdowns, Badges
   - SAFE HEADING COLOR (no pure white headings)
   ========================================================= */

/* ---------- Design tokens (default = DARK) ---------- */
:root{
  /* Surfaces */
  --bg:#0f1317;
  --panel:#161b20;
  --surface:#1a1f24;
  --line:rgba(255,255,255,.08);

  /* Text (never pure white) */
  --text:#e2e7ee;
  --text-soft:#b6beca;
  --text-strong:#e9eef5;  /* stronger than body but not #fff */

  /* Brand */
  --accent:#6f8f6a;        /* Ranger Green */
  --accent-2:#c9ae7d;      /* Brass / Coyote */

  /* Headings (THE change you asked for) */
  --heading: var(--accent-2); /* brass on dark */

  /* Misc */
  --ok:#2ecc71; --warn:#f5b14b; --err:#ff5d5d;
  --shadow:rgba(0,0,0,.45);
  --radius-sm:10px; --radius-md:14px; --radius-lg:18px;
  --s1:8px; --s2:12px; --s3:16px; --s4:22px; --s5:28px; --s6:40px;
  --maxw:1200px;

  /* Background image */
  --hero-img:url("https://i.postimg.cc/j27b88FM/M81.jpg");

  /* Map to app tokens */
  --c-text-primary: var(--text);
  --c-text-secondary: var(--text-soft);
  --c-text-inverse: var(--text-strong);
  --c-bg: var(--bg);
  --c-elevation-0: var(--panel);
  --c-elevation-1: var(--surface);
  --c-elevation-2: color-mix(in oklab, var(--surface) 90%, black);
  --c-border: var(--line);
  --c-shadow: 0 10px 24px var(--shadow);
  --call-to-action-accent: var(--accent);
  --call-to-action-text: var(--text-strong);
}

/* ---------- LIGHT overrides ---------- */
html.light, :root[data-theme="light"], body[data-theme="light"]{
  --bg:#f3f5f7; --panel:#ffffff; --surface:#ffffff; --line:rgba(0,0,0,.08);
  --text:#0f1216; --text-soft:#5b6572; --text-strong:#15191f;
  --accent:#6f8f6a; --accent-2:#9d7f49;

  /* Darken heading color on light so it stays readable */
  --heading: color-mix(in oklab, var(--accent-2) 70%, black);

  --c-text-primary: var(--text);
  --c-text-secondary: var(--text-soft);
  --c-text-inverse: var(--text-strong);
  --c-bg: var(--bg);
  --c-elevation-0: var(--panel);
  --c-elevation-1: var(--surface);
  --c-elevation-2: color-mix(in oklab, var(--surface) 94%, black);
  --c-border: var(--line);
  --c-shadow: 0 10px 20px rgba(0,0,0,.12);
}

/* Respect OS light preference if no explicit theme set */
@media (prefers-color-scheme: light){
  :root:not(.dark):not([data-theme="dark"]):not(body[data-theme="dark"]){
    --bg:#f3f5f7; --panel:#ffffff; --surface:#ffffff; --line:rgba(0,0,0,.08);
    --text:#0f1216; --text-soft:#5b6572; --text-strong:#15191f;
    --accent:#6f8f6a; --accent-2:#9d7f49;
    --heading: color-mix(in oklab, var(--accent-2) 70%, black);
    --c-text-primary: var(--text); --c-text-secondary: var(--text-soft);
    --c-text-inverse: var(--text-strong); --c-bg: var(--bg);
    --c-elevation-0: var(--panel); --c-elevation-1: var(--surface);
    --c-elevation-2: color-mix(in oklab, var(--surface) 94%, black);
    --c-border: var(--line); --c-shadow: 0 10px 20px rgba(0,0,0,.12);
  }
}

/* =========================================================
   Base / resets
   ========================================================= */
h1, .hero__title { text-shadow:none!important; }
.bg-orb, .bg-radial, .bg-stars, .stars, .particles { display:none!important; }
body::before, body::after, .home-wrap::before, .home-wrap::after,
.hero::before, .hero::after{ content:none!important; display:none!important; animation:none!important; }
html, body{ height:100%; }

/* CAMO GUTTERS: body shows camo; inner content stays solid */
body{
  background:
    linear-gradient(rgba(15,19,23,.22), rgba(15,19,23,.22)),
    var(--accent) var(--hero-img) no-repeat center center fixed;
  background-size:cover;
  color:var(--c-text-primary);
  font-synthesis-weight:none;
}
.home-wrap{ background:none; color:var(--c-text-primary); }

/* Keep content blocks solid so camo only appears on page edges */
main, .main, .page, .page-content, .container, .content,
.section, .section--content, .markdown, .article, .post-wrap, footer{
  background: var(--c-bg) !important;
  background-image: none !important;
  position: relative; z-index: 0;
}

/* Type */
h1,h2,h3,h4,h5{ color:var(--heading); margin:0 0 var(--s3); }  /* <— uses brass/darkened brass */
.small,.text-small,small{ color:var(--text-soft) !important; }

/* =========================================================
   Site chrome (navbar, panels, cards)
   ========================================================= */
.header, .navbar, .topbar, .site-header{
  background:var(--c-elevation-0) !important;
  border-bottom:1px solid var(--c-border);
  color:var(--c-text-primary);
}
.header a, .navbar a{ color:inherit; }

.panel, .box, .widget, .card, .content, .markdown, .post, .profile .card,
.forum-card, .topic-card, .category-card{
  background:var(--c-elevation-1) !important;
  border:1px solid var(--c-border);
  color:var(--c-text-primary);
  border-radius:var(--radius-md);
  box-shadow:var(--c-shadow);
  background-clip: padding-box;
  padding: 20px 22px;
}

/* =========================================================
   Buttons
   ========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.85rem 1.15rem; border-radius:var(--radius-md);
  border:1px solid var(--c-border); font-weight:700; color:var(--c-text-primary);
  text-decoration:none; transition:transform .18s, box-shadow .18s, background .18s, border-color .18s, color .18s;
  backdrop-filter:blur(4px);
}
.btn+.btn{ margin-left:10px; }

.btn--primary, .btn-primary, .button.primary{
  background:linear-gradient(180deg, color-mix(in oklab, var(--accent) 22%, transparent), color-mix(in oklab, var(--accent) 10%, transparent));
  border-color:color-mix(in oklab, var(--accent) 45%, transparent);
  color:var(--c-text-inverse);
  box-shadow:0 8px 20px color-mix(in oklab, var(--accent) 12%, transparent), inset 0 0 0 1px color-mix(in oklab, var(--accent) 12%, transparent);
}
.btn--primary:hover, .btn-primary:hover, .button.primary:hover{ transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,.20); }

.btn--ghost, .btn-ghost, .button.ghost{ background:rgba(255,255,255,.05); }
html.light .btn--ghost, html.light .btn-ghost, html.light .button.ghost{ background:rgba(0,0,0,.05); }

/* Discord button */
.btn--discord{ display:inline-flex; align-items:center; gap:.4rem; font-weight:700; }
html.light .btn--discord img{ filter:none; }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  padding:120px var(--s3) var(--s4);
  border-bottom:1px solid var(--c-border);
  background:
    linear-gradient(rgba(15,19,23,0.65), rgba(15,19,23,0.65)),
    var(--accent) var(--hero-img) no-repeat center/cover fixed !important;
}
html.light .hero, :root[data-theme="light"] .hero, body[data-theme="light"] .hero{
  background:
    linear-gradient(rgba(243,245,247,.40), rgba(243,245,247,.40)),
    var(--accent) var(--hero-img) no-repeat center/cover fixed !important;
}
.hero__inner{ max-width:var(--maxw); margin:0 auto; text-align:center; }
.hero__badge{
  display:inline-flex; align-items:center; gap:.6rem;
  color:var(--accent-2); font-weight:700; letter-spacing:.08em; font-size:.85rem;
  text-transform:uppercase; padding:.45rem .9rem; border:1px solid var(--c-border);
  border-radius:999px; background:linear-gradient(90deg, rgba(201,174,125,.14), transparent);
}
.badge-dot{ width:.5rem; height:.5rem; border-radius:50%; background:var(--accent-2); }
.hero__title{
  margin:18px auto 12px; max-width:18ch; font-weight:900;
  line-height:1.05; font-size:clamp(2rem,5vw,3.2rem); letter-spacing:.02em;
  color:var(--heading); /* no bright white */
}
.hero__title .accent{ color:var(--accent); }
.hero__subtitle{ color:var(--text-soft); max-width:68ch; margin:0 auto var(--s3); font-size:1.02rem; line-height:1.6; }

.hero__status{ margin-top:var(--s4); display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--s3); max-width:var(--maxw); margin-inline:auto; }
.status{ background:var(--c-elevation-1); border:1px solid var(--c-border); border-radius:var(--radius-md); padding:18px 14px; box-shadow:var(--c-shadow); text-align:center; }
.status__icon{ font-size:1.1rem; opacity:.85; }
.status__num{ font-size:1.55rem; font-weight:900; margin-top:6px; color:var(--heading); }
.status__label{ color:var(--text-soft); font-size:.9rem; }

/* =========================================================
   Content layout
   ========================================================= */
.section{ padding:var(--s6) var(--s3); }
.section__head{ max-width:var(--maxw); margin:0 auto var(--s3); text-align:center; }
.title{ font-size:clamp(1.6rem,2.4vw,2rem); font-weight:800; letter-spacing:.02em; color:var(--heading); }
.sub{ color:var(--text-soft); margin-top:6px; }
.grid{ width:100%; max-width:var(--maxw); margin-inline:auto; display:grid; gap:var(--s3); }

.grid--features{
  grid-template-columns:repeat(auto-fit, minmax(240px,1fr));
  gap: var(--s3) !important;
  align-items: stretch;
}
.grid--two{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--s4); }

.card{ background-clip: padding-box; }
.grid--features > .card{ border-radius: var(--radius-md); height: 100%; }

/* Optional: keep gaps clean */
.section .grid--features{ background: var(--c-bg); border-radius: calc(var(--radius-md) + 4px); }

/* Feature cards type */
.section.section--tight .sub{ max-width:72ch; margin:6px auto 0; line-height:1.55; letter-spacing:.01em; color:var(--text-soft); }
.section.section--tight .grid--features .card{ padding:22px 24px; line-height:1.6; }
.section.section--tight .grid--features .card h3{ margin:0 0 8px; letter-spacing:.01em; color:var(--heading); }
.section.section--tight .grid--features .card p{ max-width:60ch; line-height:1.65; margin:0; text-wrap:pretty; hyphens:auto; }
.section.section--tight .grid--features .card .list{ margin:12px 0 0; padding-left:22px; }
.section.section--tight .grid--features .card .list li{ margin:6px 0; line-height:1.6; color:var(--c-text-primary); }

/* Motion */
.card, .status{ transform:translateY(0); transition:transform .18s, box-shadow .18s, border-color .18s; }
.card:hover, .status:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.5); border-color:rgba(255,255,255,.12); }
html.light .card:hover, html.light .status:hover{ box-shadow:0 10px 26px rgba(0,0,0,.14); border-color:rgba(0,0,0,.12); }

/* =========================================================
   Roster / tables
   ========================================================= */
.roster, .roster-table, .unit-table, .perscom-roster{
  background: var(--c-elevation-1) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--c-shadow) !important;
  color: var(--c-text-primary) !important;
}
.roster td, .roster th, .roster-table td, .roster-table th, .unit-table td, .unit-table th{
  padding: .6rem .8rem; border-color: var(--c-border); color: var(--c-text-primary) !important;
}
.roster th, .roster-table th, .unit-table th{
  color: var(--heading) !important;
  background: color-mix(in oklab, var(--accent) 10%, var(--c-elevation-1));
}

/* Generic tables */
.markdown table, table{
  width:100%; border-collapse:separate; border-spacing:0;
  background: var(--c-elevation-1); color: var(--c-text-primary);
  border:1px solid var(--c-border); border-radius: var(--radius-md); overflow:hidden;
}
table thead th{
  background: color-mix(in oklab, var(--accent) 12%, var(--c-elevation-1));
  color: var(--heading); text-align:left; padding:.7rem .8rem; border-bottom:1px solid var(--c-border);
}
table tbody td{ padding:.65rem .8rem; border-top:1px solid var(--c-border); vertical-align:top; color: var(--c-text-primary); }
table tbody tr:nth-child(odd){ background: color-mix(in oklab, var(--c-elevation-1) 92%, #000 8%); }
html.light table tbody tr:nth-child(odd){ background: rgba(0,0,0,.03); }
.table-wrap, .markdown table{ display:block; overflow-x:auto; }

/* =========================================================
   Dropdown / menus
   ========================================================= */
.user-menu, .dropdown, .dropdown-menu, .dropdown-content, .menu, .menu-list {
  background: var(--c-elevation-0) !important;
  border: 1px solid var(--c-border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 12px 28px var(--shadow) !important;
  color: var(--c-text-primary) !important;
  backdrop-filter: blur(6px);
  z-index: 1000;
}
html.light .user-menu, html.light .dropdown-menu, html.light .dropdown-content{ background: var(--c-elevation-1) !important; }
.user-menu a, .dropdown-menu a, .menu a{
  display:flex; align-items:center; gap:.6rem; padding:.7rem .9rem;
  color:var(--c-text-primary) !important; text-decoration:none; border-radius:calc(var(--radius-sm) - 2px);
}
.user-menu a:hover, .dropdown-menu a:hover, .menu a:hover{
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  color: var(--heading) !important;
}
.user-menu .divider, .dropdown-menu .divider, .menu .divider,
.user-menu hr, .dropdown-menu hr, .menu hr{ margin:.35rem 0; border:0; height:1px; background:var(--c-border); }

/* =========================================================
   Badges / status pills
   ========================================================= */
.badge, .label, .status-badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.25rem .6rem; border-radius:999px; font-weight:700; font-size:.78rem;
  border:1px solid var(--c-border); background: color-mix(in oklab, var(--c-elevation-1) 90%, var(--accent) 10%);
  color: var(--c-text-primary);
}
.badge--success, .label-success, .status-active{
  background:linear-gradient(180deg, color-mix(in oklab, var(--ok) 38%, var(--c-elevation-1)), color-mix(in oklab, var(--ok) 20%, var(--c-elevation-1)));
  color:#0b2b14; border-color: color-mix(in oklab, var(--ok) 50%, var(--c-border));
}
html.dark .badge--success, html.dark .label-success, html.dark .status-active{ color:#eafff1; }

/* =========================================================
   Links — inherit surrounding color (no bright theme blue)
   ========================================================= */
:where(.activity, .profile, .content, .markdown, .post, .article, .page-profile)
  :is(a, a:link, a:visited, a:hover, a:focus){
  color: currentColor !important;
  -webkit-text-fill-color: currentColor !important;
  text-decoration: underline;
  text-decoration-thickness:.08em;
  text-underline-offset:.18em;
  text-decoration-color: color-mix(in oklab, currentColor 80%, var(--accent) 20%);
}

/* =========================================================
   Stop forced pure-white text from appearing
   (particularly in headings/components that used #fff)
   ========================================================= */
:where(h1,h2,h3,.title,.hero__title,[class*="title"])
  :is(.text-white,.text-inverse,.text-contrast,[style*="color:#fff"],[style*="color: #fff"],[style*="rgb(255, 255, 255)"]){
  color: var(--heading) !important;
  -webkit-text-fill-color: var(--heading) !important;
}

/* =========================================================
   Dark-mode text consistency
   ========================================================= */
html.dark, :root[data-theme="dark"], body[data-theme="dark"]{
  --c-text-primary: var(--text);
  --c-text-secondary: var(--text-soft);
  --c-text-inverse: var(--text-strong);
}
html.dark p, html.dark li, html.dark small, html.dark span,
html.dark .text, html.dark .description, html.dark .content, html.dark .activity *{
  color: var(--c-text-primary) !important; opacity: 1 !important;
}
html.dark .muted, html.dark .text-muted, html.dark .meta, html.dark .small{
  color: var(--c-text-secondary) !important; opacity: 1 !important;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1000px){ .hero__status{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){
  .grid--two{ grid-template-columns:1fr; }
  .hero{ padding-top:90px; }
  .hero__title{ max-width:16ch; }
  .btn+ .btn{ margin-left:0; margin-top:8px; }
  .card--cta{ flex-direction:column; align-items:flex-start; }
}