/* ClapNClaw — Shared Theme CSS
   Light (default) / dark / cream themes for all pages.
   Loaded via <link rel="stylesheet" href="/shared/theme.css"> */

:root {
  --accent:#0D5C3F;--accent2:#E07020;
  --accent-dim:rgba(13,92,63,.07);--accent2-dim:rgba(224,112,32,.07);
  --b0:#F0F5F2;--b1:#E4ECE7;--b2:#D8E2DB;
  --t0:#0A1E14;--t1:rgba(10,30,20,.65);--t2:rgba(10,30,20,.4);--t3:rgba(10,30,20,.25);
  --card:#fff;--green:#2D6B3F;--red:#B03020;--amber:#C08020;
  /* semantic aliases used by login/join/onboarding */
  --c-bg:var(--b0);--c-bg2:var(--b1);--c-bg3:var(--b2);
  --c-brd:var(--t3);--c-brd2:var(--t2);
  --c-t:var(--t0);--c-t2:var(--t1);--c-t3:var(--t2);
  --c-accent:var(--accent);--c-adim:var(--accent-dim);--c-abrd:rgba(13,92,63,.2);
}

[data-theme="dark"] {
  --accent:#E8FF33;--accent2:#FF8C00;
  --accent-dim:rgba(232,255,51,.08);--accent2-dim:rgba(255,140,0,.08);
  --b0:#0C0C0A;--b1:#14140F;--b2:#1C1C16;
  --t0:#F0ECE0;--t1:rgba(240,236,224,.55);--t2:rgba(240,236,224,.28);--t3:rgba(240,236,224,.18);
  --card:#161612;--green:#5ABB72;--red:#E06050;--amber:#D4A030;
  --c-bg:var(--b0);--c-bg2:var(--b1);--c-bg3:var(--b2);
  --c-brd:var(--t3);--c-brd2:var(--t2);
  --c-t:var(--t0);--c-t2:var(--t1);--c-t3:var(--t2);
  --c-accent:var(--accent);--c-adim:var(--accent-dim);--c-abrd:rgba(61,255,160,.2);
}

[data-theme="cream"] {
  --accent:#1B6B3A;--accent2:#D06820;
  --accent-dim:rgba(27,107,58,.07);--accent2-dim:rgba(208,104,32,.07);
  --b0:#F5F0E8;--b1:#EAE2D6;--b2:#DDD4C6;
  --t0:#1A1610;--t1:rgba(26,22,16,.6);--t2:rgba(26,22,16,.38);--t3:rgba(26,22,16,.2);
  --card:#FFFDF8;--green:#2D6B3F;--red:#A03020;--amber:#B07020;
  --c-bg:var(--b0);--c-bg2:var(--b1);--c-bg3:var(--b2);
  --c-brd:var(--t3);--c-brd2:var(--t2);
  --c-t:var(--t0);--c-t2:var(--t1);--c-t3:var(--t2);
  --c-accent:var(--accent);--c-adim:var(--accent-dim);--c-abrd:rgba(27,107,58,.2);
}

/* Language visibility — used by all bilingual pages */
[data-lang="de"] .en { display: none !important; }
[data-lang="en"] .de { display: none !important; }

/* Button spinner — shared across all pages that use loading states */
.btn-spinner {
  display:inline-block;width:14px;height:14px;
  border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  border-radius:50%;animation:cnc-spin .6s linear infinite;
  vertical-align:middle;margin-right:6px;
}
[data-theme="dark"] .btn-spinner {
  border-color:rgba(12,12,10,.2);border-top-color:#0C0C0A;
}
@keyframes cnc-spin {
  from{transform:rotate(0deg)} to{transform:rotate(360deg)}
}

/* Generic spinner (non-button context) */
.spinner {
  width:14px;height:14px;
  border:2px solid var(--t3);border-top-color:var(--accent);
  border-radius:50%;animation:cnc-spin .6s linear infinite;
}

/* ── Nav component (<cnc-nav>) ─────────────────────────────────────────────── */
nav{position:fixed;top:0;inset-inline:0;z-index:200;height:56px;padding:0 40px;display:flex;align-items:center;gap:24px;background:color-mix(in srgb,var(--b0) 85%,transparent);backdrop-filter:blur(20px);border-bottom:1px solid var(--t3);transition:background .4s}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--t0)}
.logo-text{font-size:18px;font-weight:400;letter-spacing:-.02em}
.logo-text b{font-weight:500;color:var(--accent)}
.nav-links{list-style:none;display:flex;gap:20px;flex:1}
.nav-links a{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--t2);text-decoration:none;transition:color .15s}
.nav-links a:hover{color:var(--t0)}
.nav-end{display:flex;gap:6px;align-items:center}
.btn-sm{font-family:'IBM Plex Mono',monospace;font-size:10px;padding:6px 10px;border:1px solid var(--t3);background:transparent;color:var(--t2);border-radius:40px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;transition:all .15s}
.btn-sm:hover{border-color:var(--accent);color:var(--accent)}
.btn-sm.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-cta-nav{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;background:var(--accent);color:#fff;padding:8px 16px;border-radius:4px;text-decoration:none;font-weight:500;transition:opacity .15s}
.btn-cta-nav:hover{opacity:.88}
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:4px}
.hamburger svg{width:24px;height:24px;stroke:var(--t0);stroke-width:2}
.mobile-menu{display:none;position:fixed;top:56px;left:0;right:0;bottom:0;background:var(--b0);z-index:199;padding:24px;flex-direction:column;gap:0;transition:background .4s}
.mobile-menu.open{display:flex}
.mobile-menu a{font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--t1);text-decoration:none;padding:14px 0;border-bottom:1px solid var(--t3)}
.mobile-menu a:hover{color:var(--accent)}
[data-theme="dark"] .btn-sm.on{color:#0C0C0A}
[data-theme="dark"] .btn-sm:not(.on){color:rgba(240,236,224,.6);border-color:rgba(240,236,224,.3)}
[data-theme="dark"] .btn-cta-nav{color:#0C0C0A}

/* ── Footer component (<cnc-footer>) ───────────────────────────────────────── */
footer{padding:28px 48px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--t3)}
.foot-logo{font-size:15px;font-weight:400;color:var(--t1);display:flex;align-items:center;gap:6px}
.foot-links{display:flex;gap:16px}
.foot-links a{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.05em;color:var(--t1);text-decoration:none;transition:color .15s}
.foot-links a:hover{color:var(--accent)}
.foot-note{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--t2)}

/* ── Topbar component (<cnc-topbar>) ───────────────────────────────────────── */
.topbar{position:fixed;top:0;inset-inline:0;z-index:200;height:48px;padding:0 24px;display:flex;align-items:center;background:color-mix(in srgb,var(--b0) 85%,transparent);backdrop-filter:blur(20px);border-bottom:1px solid var(--t3)}
.topbar .logo{gap:8px}
.logo-name{font-size:16px;font-weight:400;letter-spacing:-.02em}
.logo-name em{font-style:normal;font-weight:500;color:var(--accent)}
.tbtn{font-family:'IBM Plex Mono',monospace;font-size:10px;padding:6px 10px;border:1px solid var(--t3);background:transparent;color:var(--t2);border-radius:40px;cursor:pointer;transition:all .15s}
.tbtn:hover{border-color:var(--accent);color:var(--accent)}

/* ── Responsive (mobile) ───────────────────────────────────────────────────── */
@media(max-width:768px){
  nav{padding:0 12px;gap:8px}
  .nav-links{display:none}
  .nav-end{display:none}
  .hamburger{display:flex !important;align-items:center;justify-content:center;margin-left:auto}
  footer{padding:16px 20px;flex-direction:column;gap:10px}
}