/* Ark Control Array A-1 — design system
   Two themes, switched via [data-theme] on <html>: light (default, white
   with blue accents) and dark (black with light-blue accents). See
   /theme.js for the toggle; each page's <head> also sets the attribute
   inline before paint so there's no flash of the wrong theme. */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Spectral:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  --bg:#ffffff;
  --panel-bg:#eaf3fb;
  --panel-bg-2:#dbeaf8;
  --border:#b8d8f2;
  --border-strong:#7fb4e2;

  --accent:#1d5fb8;
  --accent-bright:#2f74d6;
  --accent-glow:rgba(47,116,214,0.22);

  --ok:#1f9d5c;
  --danger:#c8433a;

  --ink:#101826;
  --ink-dim:#3c5470;
  --ink-faint:#7691ab;

  --font-display:'Cinzel', serif;
  --font-body:'Spectral', Georgia, serif;
  --font-ui:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --radius:10px;
}

/* Dark mode: applied via the [data-theme="dark"] attribute (see theme.js).
   Kept as an explicit attribute selector rather than prefers-color-scheme
   so the toggle always wins regardless of OS setting. */
:root[data-theme="dark"]{
  --bg:#04080c;
  --panel-bg:#0b1420;
  --panel-bg-2:#0f1c2e;
  --border:#5fa8e0;
  --border-strong:#8cc4f0;

  --accent:#7cc4ff;
  --accent-bright:#a6d8ff;
  --accent-glow:rgba(124,196,255,0.25);

  --ok:#6fe0a0;
  --danger:#ff8a75;

  --ink:#eaf4ff;
  --ink-dim:#a9c6dd;
  --ink-faint:#6f8ba3;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

a{ color:var(--accent); }

h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:0.04em;
  color:var(--accent);
  margin:0;
}

.eyebrow{
  font-family:var(--font-ui);
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

/* Rune-glow divider used to separate sections without a hard line */
.rune-rule{
  height:1px;
  margin:16px 0;
  background:linear-gradient(90deg, transparent, var(--border-strong) 20%, var(--border-strong) 80%, transparent);
  position:relative;
}
.rune-rule::before{
  content:'\2726';
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  background:var(--panel-bg); padding:0 10px;
  color:var(--accent);
  font-size:11px;
}

.panel{
  background:var(--panel-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 20px;
  position:relative;
}
.panel::before{
  /* faint inner sigil border to read as arcane, not corporate */
  content:'';
  position:absolute; inset:5px;
  border:1px solid var(--border);
  opacity:0.35;
  border-radius:calc(var(--radius) - 3px);
  pointer-events:none;
}

.pill{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-ui);
  font-size:11px; letter-spacing:0.08em;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid var(--border-strong);
  color:var(--ink-dim);
}
button, input, select, textarea{ font-family:var(--font-ui); }

.btn{
  font-family:var(--font-ui);
  font-size:13px;
  letter-spacing:0.03em;
  background:var(--panel-bg-2);
  color:var(--accent);
  border:1px solid var(--border-strong);
  border-radius:var(--radius);
  padding:10px 16px;
  cursor:pointer;
  transition:box-shadow .15s, border-color .15s;
}
.btn:hover{ border-color:var(--accent); box-shadow:0 0 16px var(--accent-glow); }
.btn:disabled{ opacity:0.4; cursor:not-allowed; box-shadow:none; }
.btn.primary{ color:#fff; background:linear-gradient(180deg, var(--accent-bright), var(--accent)); border-color:var(--accent); }
:root[data-theme="dark"] .btn.primary{ color:#04080c; }
.btn.primary:hover{ box-shadow:0 0 20px var(--accent-glow); }

input[type=text], input[type=date], input[type=number], textarea, select{
  background:var(--bg);
  color:var(--ink);
  border:1px solid var(--border);
  border-radius:8px;
  padding:9px 12px;
  font-size:14px;
  width:100%;
}
input:focus, textarea:focus, select:focus{ outline:none; border-color:var(--accent); }

.scrollbar-thin::-webkit-scrollbar{ width:6px; height:6px; }
.scrollbar-thin::-webkit-scrollbar-thumb{ background:var(--border-strong); border-radius:4px; }

.theme-toggle{
  font-family:var(--font-ui);
  font-size:12px;
  background:none;
  color:var(--ink-dim);
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 12px;
  cursor:pointer;
}
.theme-toggle:hover{ border-color:var(--accent); color:var(--accent); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}