/* Ara shared theme v1 (16 Oct 2026). One palette for every Realm tile.
   Loaded LAST in <head> so it sets the page backdrop + accent; pages keep their own layout.
   Contrast: ink #e6f7fb and mute #a9c1cc on the darkest-to-lightest backdrop (#02060c..#0b2536) are >= 7:1 (WCAG AA+). */
:root{
  --ara-bg0:#02060c;      /* near-black */
  --ara-bg1:#05131f;      /* deep navy */
  --ara-bg2:#0b2536;      /* glow under the header */
  --ara-accent:#22d3ee;   /* Ara cyan, same as the A icon */
  --ara-accent2:#2dd4bf;  /* teal */
  --ara-ink:#e6f7fb;
  --ara-mute:#a9c1cc;
  --ara-line:rgba(34,211,238,.22);
  --ara-card:rgba(6,22,34,.78);
  /* shared tokens the pages already use */
  --a:var(--ara-accent);--ac:var(--ara-accent);--c:var(--ara-accent);
  --ink:var(--ara-ink);--mute:var(--ara-mute);--mut:var(--ara-mute);--tx:var(--ara-ink);
  --bg:var(--ara-bg0);--bg2:var(--ara-bg1);
  color-scheme:dark;
}
html{background:var(--ara-bg0)!important}
body{
  background:
    radial-gradient(120% 70% at 50% -12%,rgba(34,211,238,.10) 0%,rgba(34,211,238,0) 55%),
    linear-gradient(180deg,var(--ara-bg2) 0%,var(--ara-bg1) 32%,var(--ara-bg0) 100%) fixed !important;
  background-color:var(--ara-bg0)!important;
  background-attachment:fixed!important;
  min-height:100vh;
}
::selection{background:rgba(34,211,238,.35);color:#fff}
:focus-visible{outline:2px solid var(--ara-accent);outline-offset:2px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:rgba(34,211,238,.28);border-radius:8px}
::-webkit-scrollbar-track{background:transparent}
.ara-muted{color:var(--ara-mute)}