/* ============================================================
   Shared skin for the public site and the admin dashboard.
   Same stamp-ink palette as the tool itself.
   ============================================================ */

:root {
  --bg:        #F5F4F8;
  --surface:   #FFFFFF;
  --surface-2: #FAF9FC;
  --surface-3: #F0EEF6;
  --line:      #E3E0EC;
  --line-2:    #CFCBDD;
  --ink:       #191725;
  --ink-2:     #4A4759;
  --ink-3:     #7A7789;
  --accent:    #4A37C8;
  --accent-2:  #3A2AA6;
  --accent-soft:#EDE9FC;
  --on-accent: #FFFFFF;
  --good:      #0D7A57;
  --good-soft: #E2F3EC;
  --warn:      #9C5B0A;
  --warn-soft: #FBF0DF;
  --bad:       #B3261E;
  --bad-soft:  #FBE9E7;

  /* data marks — validated pair, see notes in the deploy guide */
  --series-1:  #4a3aa7;   /* returning */
  --series-2:  #1baf7a;   /* new */
  --grid:      #E7E4F0;

  --shadow-sm: 0 1px 2px rgba(25,23,37,.06), 0 1px 1px rgba(25,23,37,.04);
  --shadow-md: 0 4px 16px rgba(25,23,37,.08), 0 1px 3px rgba(25,23,37,.05);
  --shadow-lg: 0 24px 60px rgba(25,23,37,.16), 0 6px 16px rgba(25,23,37,.08);
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px; --r-xl: 24px;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-ui: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #131220;
    --surface:   #1C1A2B;
    --surface-2: #232135;
    --surface-3: #2A2740;
    --line:      #322F47;
    --line-2:    #45415E;
    --ink:       #EDEBF5;
    --ink-2:     #B4B0C6;
    --ink-3:     #837F97;
    --accent:    #A093FF;
    --accent-2:  #C3B9FF;
    --accent-soft:#272247;
    --on-accent: #14112B;
    --good:      #46C79A;
    --good-soft: #14312A;
    --warn:      #E0A458;
    --warn-soft: #33270F;
    --bad:       #F2837B;
    --bad-soft:  #3A1A18;
    --series-1:  #9085e9;
    --series-2:  #199e70;
    --grid:      #2B2841;
    --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
    --shadow-md: 0 4px 16px rgba(0,0,0,.45);
    --shadow-lg: 0 24px 60px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"] {
  --bg:        #131220;
  --surface:   #1C1A2B;
  --surface-2: #232135;
  --surface-3: #2A2740;
  --line:      #322F47;
  --line-2:    #45415E;
  --ink:       #EDEBF5;
  --ink-2:     #B4B0C6;
  --ink-3:     #837F97;
  --accent:    #A093FF;
  --accent-2:  #C3B9FF;
  --accent-soft:#272247;
  --on-accent: #14112B;
  --good:      #46C79A;
  --good-soft: #14312A;
  --warn:      #E0A458;
  --warn-soft: #33270F;
  --bad:       #F2837B;
  --bad-soft:  #3A1A18;
  --series-1:  #9085e9;
  --series-2:  #199e70;
  --grid:      #2B2841;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow-md: 0 4px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 24px 60px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }
/* a class that sets `display` otherwise beats the hidden attribute */
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: var(--accent-soft); color: var(--ink); }
a { color: var(--accent); text-underline-offset: 3px; }
img, svg { max-width: 100%; }

h1, h2, h3 { font-family: var(--font-display); font-variation-settings: "SOFT" 0, "WONK" 1; letter-spacing: -.02em; text-wrap: balance; margin: 0; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.wrap { width: min(1120px, 100% - 40px); margin-inline: auto; }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
.eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r-sm); border: 1px solid var(--line-2);
  background: var(--surface); color: var(--ink); cursor: pointer;
  font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--surface-3); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn.primary:hover:not(:disabled) { background: var(--accent-2); border-color: var(--accent-2); }
.btn.big { padding: 15px 28px; font-size: 17px; border-radius: var(--r-md); }
.btn.sm { padding: 6px 12px; font-size: 13px; }
.btn svg { width: 18px; height: 18px; stroke-width: 1.8; }

input[type=text], input[type=email], select {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line-2);
  border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink); font-size: 15px;
}
input:focus, select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }

.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px;
  background: var(--surface-3); color: var(--ink-2); font-size: 12px;
  font-family: var(--font-mono); letter-spacing: .02em;
}
.pill.good { background: var(--good-soft); color: var(--good); }
.pill.live { background: var(--good-soft); color: var(--good); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dot.pulse { animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .dot.pulse { animation: none; } * { transition: none !important; } }