/* ===================== BlackRose Global (v2, safe) =====================
   Purpose: Shared tokens + theme overrides + minimal utilities only.
   - Light is fallback
   - No global link (.a), button (.btn), or header styles here
   - Pages/components own their element styles
======================================================================= */

:root{
  /* Light fallback */
  --bg:#F5F4F1;
  --surface:#FFFFFF;
  --sand:#D9C7AD;
  --border:#C9C9C9;
  --text:#2B2B2B;
  --text-strong:#111314;

  /* Nature/Brand */
  --brand:#277A1E;
  --forest:#163425;
  --moss:#6A7F53;
  --sage:#8FA08A;
  --teal:#5C747A;
  --walnut:#6A3F21;

  /* Neon accents */
  --neon-pink:#FF2D8A;
  --neon-cyan:#20E0D8;
  /* Per-theme accent routing */
  --accent-neon: var(--neon-cyan);

  /* Component aliases */
  --rail:#FFFFFF;
  --tile:#FFFFFF;
  --muted:#606b66;
  --gap:16px;
  --radius:14px;

  /* Shadows */
  --shadow-lg: 0 10px 30px rgba(0,0,0,.12);
  --shadow-md: 0 8px 20px rgba(0,0,0,.10);
  --accent-neon: var(--neon-cyan);
}

/* Respect system preference if no manual choice */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0F1413;
    --surface:#161A18;
    --sand:#2A2A25;
    --border:#2A312D;
    --text:#E6E8E5;
    --text-strong:#FFFFFF;

    --brand:#277A1E;
    --forest:#0E1F18;
    --moss:#6A7F53;
    --sage:#9CB3A1;
    --teal:#8BA5AA;
    --walnut:#8B5A32;

    --rail:#161A18;
    --tile:#161A18;
    --muted:#A9B4AE;

    --shadow-lg: 0 12px 32px rgba(0,0,0,.45);
    --shadow-md: 0 8px 24px rgba(0,0,0,.38);
  }
}

/* Manual override wins */
html[data-theme="dark"]{
  --bg:#0F1413;
  --surface:#161A18;
  --sand:#2A2A25;
  --border:#2A312D;
  --text:#E6E8E5;
  --text-strong:#FFFFFF;
  --brand:#277A1E;
  --forest:#0E1F18;
  --moss:#6A7F53;
  --sage:#9CB3A1;
  --teal:#8BA5AA;
  --walnut:#8B5A32;
  --rail:#161A18;
  --tile:#161A18;
  --muted:#A9B4AE;
  --shadow-lg: 0 12px 32px rgba(0,0,0,.45);
  --shadow-md: 0 8px 24px rgba(0,0,0,.38);
  --accent-neon: var(--neon-pink);
}
html[data-theme="light"]{
  --bg:#F5F4F1;
  --surface:#FFFFFF;
  --sand:#D9C7AD;
  --border:#C9C9C9;
  --text:#2B2B2B;
  --text-strong:#111314;
  --brand:#277A1E;
  --forest:#163425;
  --moss:#6A7F53;
  --sage:#8FA08A;
  --teal:#5C747A;
  --walnut:#6A3F21;
  --rail:#FFFFFF;
  --tile:#FFFFFF;
  --muted:#606b66;
  --shadow-lg: 0 10px 30px rgba(0,0,0,.12);
  --shadow-md: 0 8px 20px rgba(0,0,0,.10);
  --accent-neon: var(--neon-cyan);
}

/* Minimal base (safe) */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;line-height:1.6}

/* Utilities only (namespaced, non-invasive) */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.surface-white{background:#FFFFFF;color:#111314}
/* === Global Buttons (minimal) === */
.btn{
  appearance:none; border:1px solid var(--border); background:var(--surface); color:var(--text);
  border-radius:10px; padding:8px 10px; cursor:pointer; box-shadow:var(--shadow-md);
}
.btn:focus{outline:2px solid var(--accent-neon); outline-offset:2px}
.btn:hover{border-color:var(--accent-neon)}

#themeToggle,
#themeToggleDesktop {
  display: inline-block;
  min-width: 80px; /* passt zur Breite von "Dunkel" */
  text-align: center;
}