/* ============================================================
   G8N•AI site — shared theme + logo lockup
   Loads AFTER g8n-ds.css. Drives light/dark off the design
   system's [data-theme] token remap. Default is system; a
   user toggle (Auto -> Light -> Dark) overrides and persists.
   ============================================================ */

/* --- Logo lockup (roundel mark + wordmark) --- */
.g8n-logo{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;line-height:1}
.g8n-logo__mark{display:inline-block;flex:none;width:34px;height:34px}
.g8n-logo .wm .name{font-family:var(--font-wordmark,var(--font-body));font-weight:700;letter-spacing:-0.5px;font-size:1.15rem;color:var(--text-strong)}
.g8n-logo .wm .name .dot{color:var(--accent)}
.g8n-logo .wm .sub{display:block;font-family:var(--font-body);font-weight:700;font-size:9px;letter-spacing:var(--ls-eyebrow,0.14em);text-transform:uppercase;color:var(--text-muted)}
/* swap navy mark (light) <-> cream mark (dark) */
.g8n-logo__mark.mark-dark{display:none}
[data-theme="dark"] .g8n-logo__mark.mark-light{display:none}
[data-theme="dark"] .g8n-logo__mark.mark-dark{display:inline-block}
.g8n-logo--sm .g8n-logo__mark{width:24px;height:24px}
.g8n-logo--sm .wm .name{font-size:1rem}

/* --- Theme toggle (Auto / Light / Dark) --- */
.theme-toggle{font-family:var(--font-body);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);background:transparent;border:1px solid var(--surface-rule);border-radius:999px;padding:.42rem .72rem;cursor:pointer;line-height:1;transition:color .15s,border-color .15s}
.theme-toggle:hover{color:var(--text-strong);border-color:var(--border-ink)}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* --- Page surface follows the theme --- */
/* light = ruled paper (the .g8n-paper default); dark = board grid */
[data-theme="dark"] .g8n-paper{
  background-color:var(--g8n-charcoal);
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size:40px 40px;
}