/* Centerboard web UI — shared tokens and primitives.
 *
 * One stylesheet for the marketing pages, sign-up and the hosted app, so they
 * read as one product. The palette is "Navy Elegance": deep navy ink on warm
 * cream, slate and blue-gray for secondary text, taupe for lines, antique
 * gold as the single accent, charcoal for code. Light only, on purpose — a
 * dark variant would be a second design rather than a token swap.
 *
 * Fonts are self-hosted (fonts/*.woff2, SIL Open Font License) because the
 * privacy notice promises no third-party requests, and the CSP enforces it.
 */

@font-face{
  font-family:"Wix Madefor Display";
  font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/fonts/wix-madefor-display.woff2) format("woff2");
}
@font-face{
  font-family:"Wix Madefor Text";
  font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/fonts/wix-madefor-text.woff2) format("woff2");
}

:root{
  /* palette */
  --navy:#0F2A44; --slate:#3D5570; --bluegray:#7A8CA3; --cream:#F2EDE5; --taupe:#B7A997; --gold:#B08A44; --charcoal:#2A2D31;

  /* surfaces */
  --bg:var(--cream); --bg-2:#EAE3D8; --white:#FFFFFF; --sunken:#EAE3D8; --sunken-2:#E0D8CB;
  /* ink */
  --text:var(--navy); --text-2:var(--slate); --muted:#5A6B80; --faint:#A3AEBD;
  /* lines */
  --line:#DED5C7; --line-strong:var(--taupe);
  /* accent and tints */
  --accent:var(--gold); --accent-ink:#8F6F33; --accent-soft:#F0E7D3;
  --blue:var(--gold); --blue-ink:#8F6F33; --blue-soft:#C5CFDD; --sky:#C5CFDD; --teal:#A9B8CB;
  --lime:#E3D3AE; --peach:#EBDCB9; --orange:var(--gold); --plum:#D8CDBE;
  --good:#1E7F4F; --bad:#B23A2E; --bad-bg:#F8E7E3; --bad-ink:#8E2A1F; --bad-line:#EFC7BF;
  /* the primary action, as a role rather than a colour */
  --btn-bg:var(--navy); --btn-fg:var(--cream); --btn-bg-hover:var(--slate);
  --focus-ring:rgba(176,138,68,.22);
  /* text sitting ON a coloured fill: charcoal beats white on gold in both
     themes (4.3 vs 3.2 light, 6.3 vs 2.2 dark); green needs the opposite. */
  --on-accent:var(--charcoal); --on-good:#FFFFFF;
  --code-bg:var(--charcoal); --code-fg:#EDE6DA;
  --grid-ink:15,42,68;
  --font-display:"Wix Madefor Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-text:"Wix Madefor Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px; --r-pill:300px;
  --shadow-sm:0 1px 2px rgba(15,42,68,.06),0 2px 8px -2px rgba(15,42,68,.10);
  --shadow-md:0 2px 4px rgba(15,42,68,.05),0 12px 32px -8px rgba(15,42,68,.16);
  --shadow-lg:0 4px 8px rgba(15,42,68,.05),0 30px 60px -20px rgba(15,42,68,.26);
  --focus:var(--gold);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-text); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:400; line-height:1.15; letter-spacing:-.01em; color:var(--text)}
p{margin:0}
a{color:inherit; text-underline-offset:3px}
button,input{font:inherit; color:inherit}
button{cursor:pointer}
img,svg{display:block; max-width:100%}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:var(--r-xs)}
.hidden{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- brand ---------- */
.logo{display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--text); font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:-.01em}
.logo svg{flex:none}
.logo .mark{width:26px; height:26px}
.mark .ink{fill:currentColor; stroke:currentColor}
.mark .water{fill:none; stroke:var(--accent)}

/* ---------- buttons ---------- */
.pill{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:52px; padding:0 26px; border-radius:var(--r-pill);
  background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-bg);
  font-family:var(--font-text); font-size:15px; font-weight:500; text-decoration:none;
  white-space:nowrap; transition:transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.pill:hover{background:var(--btn-bg-hover); border-color:var(--btn-bg-hover); transform:translateY(-1px); box-shadow:var(--shadow-md)}
.pill:active{transform:translateY(0)}
.pill.sm{height:40px; padding:0 18px; font-size:14px}
.pill.ghost{background:transparent; color:var(--text); border-color:var(--line-strong)}
.pill.ghost:hover{background:var(--white); border-color:var(--text)}
.pill.gold{background:var(--gold); border-color:var(--gold); color:var(--white)}
.pill.gold:hover{background:var(--accent-ink); border-color:var(--accent-ink)}
.pill.blue{background:var(--gold); border-color:var(--gold); color:var(--white)}
.pill.blue:hover{background:var(--accent-ink); border-color:var(--accent-ink)}
.pill .arrow{transition:transform .15s ease}
.pill:hover .arrow{transform:translateX(2px)}
.textlink{color:var(--muted); font-size:14px; text-decoration:none}
.textlink:hover{color:var(--text); text-decoration:underline}

/* form-style buttons (the register page) */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%;
  height:40px; padding:0 14px; border-radius:var(--r-sm);
  background:var(--white); color:var(--text); border:1px solid var(--line-strong);
  font-size:14px; font-weight:500; text-decoration:none; transition:background .12s ease, border-color .12s ease;
}
.btn:hover{background:var(--bg); border-color:var(--text)}
.btn.primary{background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-bg)}
.btn.primary:hover{background:var(--btn-bg-hover); border-color:var(--btn-bg-hover)}
.btn.primary:disabled{background:var(--sunken-2); color:var(--faint); border-color:var(--sunken-2); cursor:not-allowed}
.btn svg{flex:none}

/* ---------- fields ---------- */
.field{display:flex; flex-direction:column; gap:7px}
.field label{font-size:14px; font-weight:500; color:var(--text)}
.field .control{
  display:flex; align-items:center; gap:8px; height:40px; padding:0 12px;
  background:var(--white); border:1px solid var(--line-strong); border-radius:var(--r-sm);
  transition:border-color .12s ease, box-shadow .12s ease;
}
.field .control:focus-within{border-color:var(--text); box-shadow:0 0 0 3px var(--focus-ring)}
.field input{flex:1; min-width:0; border:0; outline:0; background:transparent; font-size:14px; padding:0; height:100%; color:var(--text)}
.field input::placeholder{color:var(--faint)}
.field .aux{appearance:none; border:0; background:none; color:var(--muted); font-size:12px; font-weight:500; padding:4px 2px}
.field .aux:hover{color:var(--text)}
.field .hint{font-size:12px; color:var(--muted)}
.field.invalid .control{border-color:var(--bad)}

.divider{display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em}
.divider::before,.divider::after{content:""; flex:1; height:1px; background:var(--line)}

.alert{border-radius:var(--r-sm); padding:10px 12px; font-size:13.5px; line-height:1.45}
.alert.bad{background:var(--bad-bg); color:var(--bad-ink); border:1px solid var(--bad-line)}
.alert.info{background:var(--sunken); color:var(--text-2); border:1px solid var(--line)}
.status{min-height:20px; font-size:13.5px; color:var(--muted)}
.status.bad{color:var(--bad)}
.status.good{color:var(--good)}

/* ---------- backgrounds ---------- */
.blobs{position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0}
.blob{position:absolute; border-radius:50%; filter:blur(70px); opacity:.75}
.blob.teal{background:var(--teal)}
.blob.sky{background:var(--sky)}
.blob.blue{background:var(--bluegray)}
.blob.lime{background:var(--lime)}
.blob.plum{background:var(--plum)}
.blob.gold{background:var(--lime)}
.grid-lines{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right, rgba(var(--grid-ink),.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--grid-ink),.08) 1px, transparent 1px);
  background-size:25% 100%, 100% 33.333%;
  background-position:12.5% 0, 0 16.6%;
  mask-image:radial-gradient(120% 80% at 50% 50%, #000 40%, transparent 100%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 50%, #000 40%, transparent 100%);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important; animation:none !important}
}


/* ---------------------------------------------------------------------------
   Dark theme — the same palette, inverted onto charcoal.
   ---------------------------------------------------------------------------
   Charcoal #2A2D31 is the ground, cream is the ink, gold stays the one accent.
   Navy cannot be the primary button here: it is DARKER than the background, so
   it would sink into it. The primary action inverts to cream on charcoal, and
   navy is lifted to #16375A where it survives as an accent surface.

   Every pair below was measured, not eyeballed: body and secondary text clear
   4.5:1 on all three surfaces, and --line-strong (the border on anything you
   can operate) clears 3:1 on all of them. It is the palette's own blue-gray,
   which is the only member that does.
   --------------------------------------------------------------------------- */
:root[data-theme="dark"]{
  --navy:#16375A;              /* lifted, so it reads as a surface on charcoal */
  --bg:var(--charcoal); --bg-2:#22252A; --white:#34383E; --sunken:#25282D; --sunken-2:#1E2126;
  --text:var(--cream); --text-2:#D8D2C7; --muted:#A7B0BC; --faint:#8A929D;
  --line:#3E434A; --line-strong:#7A8CA3; --taupe:#7A8CA3;
  --accent:#D4A855; --accent-ink:#E8C98A; --accent-soft:#3B3527;
  --blue:#D4A855; --blue-ink:#E8C98A; --blue-soft:#3C4A5C; --sky:#3C4A5C; --teal:#39505F;
  --lime:#4A4331; --peach:#4A4132; --orange:#D4A855; --plum:#3F3A44;
  --good:#5BC48C; --bad:#F08C7E; --bad-bg:#3A2724; --bad-ink:#F5B3A8; --bad-line:#5C3A34;
  --btn-bg:var(--cream); --btn-fg:var(--charcoal); --btn-bg-hover:#E2DBCD;
  --focus:#D4A855; --focus-ring:rgba(212,168,85,.30);
  --code-bg:#1B1E22; --code-fg:#EDE6DA;
  --on-accent:var(--charcoal); --on-good:var(--charcoal);
  --grid-ink:242,237,229;
  --shadow-sm:0 1px 2px rgba(0,0,0,.30),0 2px 8px -2px rgba(0,0,0,.40);
  --shadow-md:0 2px 4px rgba(0,0,0,.30),0 12px 32px -8px rgba(0,0,0,.50);
  --shadow-lg:0 4px 8px rgba(0,0,0,.30),0 30px 60px -20px rgba(0,0,0,.60);
  color-scheme:dark;
}

/* The mark is drawn in currentColor with the accent for its waterline, so it
   follows the theme and the footer on its own; nothing to swap here. */

/* Pastel blobs are for a cream page. On charcoal they glare, so they become a
   wash rather than a light source. */
:root[data-theme="dark"] .blob{opacity:.30; filter:blur(80px)}
:root[data-theme="dark"] .blob.teal{background:#3D6E80}
:root[data-theme="dark"] .blob.sky{background:#3C5878}
:root[data-theme="dark"] .blob.blue{background:#4A5568}
:root[data-theme="dark"] .blob.lime,
:root[data-theme="dark"] .blob.gold{background:#7A6234}
:root[data-theme="dark"] .blob.plum{background:#4C4553}