/* ============================================================================
   Publishing Dream Team  brand theme
   Source of truth: C:\Users\gdp\projects\design-system\tokens.css
   Azure brand, green CTA. Every button is a solid fill with white text.
   Light is the only active theme; dark tokens are defined for later.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --brand-50:#EBF3FE; --brand-100:#D6E6FD; --brand-200:#B0CEFB; --brand-300:#82B0F7;
  --brand-400:#4F8DF0; --brand-500:#1E7CE8; --brand-600:#1663C6; --brand-700:#144F9F;
  --brand-800:#163F7B; --brand-900:#15355F; --brand-950:#0E2038;

  --accent-50:#E4F5EA; --accent-100:#BFE8CC; --accent-200:#8DD5A6; --accent-300:#56BE7B;
  --accent-400:#24A957; --accent-500:#12A150; --accent-600:#0E8542; --accent-700:#0C6A36;
  --accent-800:#0C5430; --accent-900:#0A4228;

  --neutral-0:#FFFFFF; --neutral-50:#F6F8FC; --neutral-100:#EDF1F7; --neutral-200:#E0E6F0;
  --neutral-300:#CAD3E1; --neutral-400:#97A3B8; --neutral-500:#6A7688; --neutral-600:#4C5768;
  --neutral-700:#333D4C; --neutral-800:#1E2733; --neutral-900:#131A24;

  --success:#0B7A3E; --success-surface:#E3F3E8;
  --warning:#E5A400; --warning-surface:#FBF2DD;
  --danger:#E5484D;  --danger-surface:#FCECED;

  --background:var(--neutral-50);
  --foreground:var(--neutral-800);
  --surface:var(--neutral-0);
  --surface-alt:var(--neutral-100);
  --muted-foreground:var(--neutral-500);

  --primary:var(--accent-600);          /* deep green CTA, white text ~4.7:1 */
  --primary-hover:var(--accent-700);
  --primary-foreground:var(--neutral-0);

  --secondary:var(--brand-600);         /* deep azure, white text ~5.8:1 */
  --secondary-hover:var(--brand-700);
  --secondary-foreground:var(--neutral-0);

  --link:var(--brand-600);
  --link-hover:var(--brand-700);

  --accent-surface:var(--brand-50);
  --accent-surface-foreground:var(--brand-700);

  --border:var(--neutral-200);
  --border-strong:var(--neutral-300);
  --ring:var(--accent-600);

  --font-sans:"Open Sans","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --font-mono:ui-monospace,"SF Mono","Cascadia Mono",Consolas,Menlo,monospace;

  --text-sm:0.9375rem; --text-base:1.125rem; --lh-base:1.55;
  --radius-sm:6px; --radius-md:10px; --radius-lg:12px; --radius-xl:16px; --radius-2xl:24px;

  --shadow-xs:0 1px 2px rgba(14,32,56,.06);
  --shadow-sm:0 1px 3px rgba(14,32,56,.08),0 1px 2px rgba(14,32,56,.04);
  --shadow-md:0 4px 12px rgba(14,32,56,.08);
  --shadow-lg:0 12px 28px rgba(14,32,56,.12);

  --ease-standard:cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(0,0,.2,1);

  --hero-wash:linear-gradient(180deg,var(--brand-50) 0%,var(--neutral-50) 70%);

  /* ---- The rest of the shared scale (added 2026-09-06) ----------------------
     PDT carried a reduced subset of the canon at
     C:\Users\gdp\projects\design-system\tokens.css: enough for the pages that
     existed, but not the spacing, type and motion steps. The onboarding wizard
     is ported from C2C, whose stylesheet is written against the full scale, so
     the missing steps are filled in here with the canon's own values rather
     than the CSS being rewritten to fit a smaller vocabulary. Purely additive:
     no existing page references any of these names, so nothing changes shape. */
  --input:var(--neutral-300);
  --muted:var(--neutral-100);

  --text-xs:0.8125rem; --text-lg:1.25rem; --text-xl:1.375rem;
  --text-2xl:1.625rem; --text-3xl:2rem; --text-4xl:2.5rem;

  --weight-normal:400; --weight-medium:500; --weight-semibold:600;
  --weight-bold:700; --weight-extrabold:800;

  --space-0:0; --space-1:0.125rem; --space-2:0.25rem; --space-3:0.5rem;
  --space-4:0.75rem; --space-5:1rem; --space-6:1.25rem; --space-7:1.5rem;
  --space-8:2rem; --space-9:2.5rem; --space-10:3rem; --space-12:4rem;

  --radius-full:9999px;
  --border-width:1px;
  --shadow-cta:0 6px 20px rgba(18,161,80,.30);

  --duration-fast:120ms; --duration-base:180ms; --duration-slow:280ms;
  --ease-inout:cubic-bezier(.4,0,.2,1);
}

/* Dark tokens  defined, not activated by any toggle yet. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --background:var(--brand-950); --foreground:#E7EDF6;
    --surface:#122B49; --surface-alt:#15355F; --muted-foreground:#9DB0C7;
    --primary:var(--accent-300); --primary-hover:var(--accent-200); --primary-foreground:var(--brand-950);
    --secondary:var(--brand-400); --secondary-hover:var(--brand-300); --secondary-foreground:var(--brand-950);
    --link:var(--brand-300); --link-hover:var(--brand-200);
    --accent-surface:#17324F; --accent-surface-foreground:var(--brand-100);
    --border:#24405F; --border-strong:#335070; --ring:var(--accent-400);
    --success-surface:#123524; --warning-surface:#3A2E12; --danger-surface:#3A1B1D;
    --shadow-xs:0 1px 2px rgba(0,0,0,.4);
    --shadow-sm:0 1px 3px rgba(0,0,0,.45),0 1px 2px rgba(0,0,0,.3);
    --shadow-md:0 4px 12px rgba(0,0,0,.45);
    --shadow-lg:0 12px 28px rgba(0,0,0,.55);
    --hero-wash:linear-gradient(180deg,#15355F 0%,var(--brand-950) 70%);
  }
}

/* ---- base ---- */
*,*::before,*::after{box-sizing:border-box;}
body{
  font-family:var(--font-sans);
  font-size:var(--text-base); line-height:var(--lh-base);
  color:var(--foreground); background:var(--background);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--link); text-decoration:none;}
a:hover{color:var(--link-hover); text-decoration:underline; text-underline-offset:2px;}
h1,h2,h3{text-wrap:balance;}

/* ---- buttons ---- */
.btn,button.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:12px 22px;
  border:1px solid transparent; border-radius:var(--radius-md);
  font:inherit; font-weight:600; line-height:1; cursor:pointer; text-decoration:none;
  transition:background-color .18s var(--ease-standard),box-shadow .18s var(--ease-standard),transform .12s var(--ease-standard);
}
.btn:focus-visible,button.btn:focus-visible{outline:2px solid var(--ring); outline-offset:2px;}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--primary); color:var(--primary-foreground); box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--primary-hover); box-shadow:var(--shadow-md); color:var(--primary-foreground); text-decoration:none;}
.btn-secondary{background:var(--secondary); color:var(--secondary-foreground); box-shadow:var(--shadow-sm);}
.btn-secondary:hover{background:var(--secondary-hover); box-shadow:var(--shadow-md); color:var(--secondary-foreground); text-decoration:none;}
.btn-ghost{background:var(--surface); color:var(--foreground); border-color:var(--border-strong);}
.btn-ghost:hover{background:var(--surface-alt); border-color:var(--neutral-400); color:var(--foreground); text-decoration:none;}
/* Destructive actions (Disconnect). Brand red, so an action that takes
   something away never looks like an action that gives something. */
.btn-danger{background:var(--danger); color:#fff; border-color:var(--danger);}
.btn-danger:hover{background:#C93B40; border-color:#C93B40; color:#fff; text-decoration:none;}
.btn:disabled,button.btn:disabled{opacity:.5; cursor:not-allowed; box-shadow:none;}

/* Pulsing CTA  green halo, does not shift layout. */
.btn-pulse{animation:cta-halo 2.4s var(--ease-out) infinite;}
@keyframes cta-halo{
  0%{box-shadow:0 0 0 0 rgba(14,133,66,.45);}
  70%{box-shadow:0 0 0 14px rgba(14,133,66,0);}
  100%{box-shadow:0 0 0 0 rgba(14,133,66,0);}
}
.btn .arrow{transition:transform .18s var(--ease-standard);}
.btn:hover .arrow{transform:translateX(3px);}

/* ---- surfaces ---- */
.card{
  background:var(--surface); color:var(--foreground);
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:20px; box-shadow:var(--shadow-xs);
}

/* ---- form ---- */
.input,input.input{
  width:100%; min-height:44px; padding:12px 14px;
  border:1px solid var(--border-strong); border-radius:var(--radius-md);
  background:var(--surface); color:var(--foreground); font:inherit;
  transition:border-color .18s var(--ease-standard),box-shadow .18s var(--ease-standard);
}
.input::placeholder{color:var(--neutral-400);}
.input:focus-visible{outline:none; border-color:var(--ring); box-shadow:0 0 0 3px rgba(14,133,66,.20);}
.input:disabled{background:var(--surface-alt); color:var(--neutral-400); cursor:not-allowed;}

/* ---- bits ---- */
.badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:999px;
  font-size:.72rem; font-weight:700; letter-spacing:.03em;
  background:var(--accent-surface); color:var(--accent-surface-foreground);
}
.badge.warn{background:var(--warning-surface); color:#8A6400;}
.pill{font-size:.78rem; border-radius:999px; padding:3px 12px; font-weight:700;}
.pill.on{background:var(--success-surface); color:var(--success);}
.pill.off{background:var(--surface-alt); color:var(--muted-foreground);}

.note-err{
  background:var(--danger-surface); border:1px solid #F3B9BB; color:#9B2C30;
  padding:14px; border-radius:var(--radius-md); font-size:var(--text-sm);
}
.note-ok{
  background:var(--success-surface); border:1px solid #B7E0C5; color:var(--success);
  padding:14px; border-radius:var(--radius-md); font-weight:600;
}

pre,.pre{
  white-space:pre-wrap; font-family:var(--font-mono); font-size:.9rem;
  background:var(--surface-alt); border-radius:var(--radius-sm); padding:12px; margin:0;
  color:var(--foreground);
}

@media (prefers-reduced-motion:reduce){
  .btn-pulse{animation:none;}
  *{transition-duration:.01ms !important;}
}