/* ============================================================
   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 (symbol: shows the theme currently on screen) --- */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;color:var(--text-muted);background:transparent;border:1px solid var(--surface-rule);border-radius:999px;cursor:pointer;line-height:0;transition:color .15s,border-color .15s}
.theme-toggle:hover{color:var(--accent);border-color:var(--accent)}
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.theme-toggle .ti{display:block;width:16px;height:16px}
/* light on screen -> sun; dark on screen -> moon */
.theme-toggle .ti-moon{display:none}
[data-theme="dark"] .theme-toggle .ti-sun{display:none}
[data-theme="dark"] .theme-toggle .ti-moon{display:block}

/* --- 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;
}