/* ═══════════════════════════════════════════════════════════════════════
   SYNTHESIA BRAND TOKENS

   Lifted verbatim from synthesia.io's own stylesheet
   (cdn.prod.website-files.com/65e89895.../synthesia-staging-....opt.min.css),
   not eyeballed from a screenshot. Names match theirs so a future diff against
   the source is a name-for-name comparison rather than a guess.

   Two of these already appear in this page's logo mark: indigo-500 #3e57da and
   the teal. The rest of the page was carrying a different blue (#4a3aff) and a
   generic slate, which is why it read as "a dark widget" rather than as ours.

   THE BRAND TYPEFACE IS BASIER SQUARE, and it is NOT loaded here. The files sit
   on Synthesia's Webflow CDN and this app cannot fetch them from a third-party
   origin, nor should it self-host a licensed face without someone confirming the
   licence covers this use. The stack below names it first, so the day it is
   self-hosted under /assets/fonts the page picks it up with no other change.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* -- Synthesia palette, verbatim ------------------------------------- */
  --syn-base-dark: #0d0f2c;

  --syn-indigo-100: #f5f8ff;
  --syn-indigo-200: #e3ebff;
  --syn-indigo-300: #c6d7fe;
  --syn-indigo-400: #8098f9;
  --syn-indigo-500: #3e57da;   /* the primary. Same blue as the logo mark. */
  --syn-indigo-600: #2c43b8;
  --syn-indigo-700: #1f235b;

  --syn-teal-300: #c8faff;
  --syn-teal-400: #66e3ee;
  --syn-teal-500: #00cee0;     /* the logo's second colour */
  --syn-teal-600: #008eae;

  --syn-grey-100: #f2f4fd;
  --syn-grey-200: #e6eaf4;
  --syn-grey-300: #d1d6e5;
  --syn-grey-400: #c8cbda;
  --syn-grey-500: #969bb5;
  --syn-grey-600: #656c86;
  --syn-grey-700: #333b52;

  --syn-success: #15a261;
  --syn-success-bright: #47cd89;
  --syn-error: #f04438;
  --syn-error-deep: #d92d20;
  --syn-warning: #f79009;
  --syn-yellow: #ffc814;


  /* Ink has three weights now, not two. The transcript needs a third step
     between body text and a muted label, or every non-body element competes with
     the answer for attention. */
  --ink: var(--syn-base-dark);
  --ink-soft: var(--syn-grey-700);
  --ink-faint: var(--syn-grey-500);

  /* Neutrals warmed very slightly off pure blue-grey. Against a customer's page
     the old #f6f7fb read as a cold panel; this sits more quietly on white. */
  --line: var(--syn-grey-200);
  --line-soft: var(--syn-grey-100);
  --bg: #ffffff;
  --bg-soft: var(--syn-grey-100);
  --bg-stage: var(--syn-base-dark);

  /* Was #4a3aff, which is nobody's blue. */
  --accent: var(--syn-indigo-500);
  --accent-ink: var(--syn-indigo-600);
  --accent-soft: var(--syn-indigo-100);
  --accent-line: var(--syn-indigo-300);

  --good: var(--syn-success);
  --warn: var(--syn-warning);
  --bad: var(--syn-error-deep);

  /* One radius was doing every job. A 14px panel and a 14px inline chip do not
     want the same curve. */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* Two elevations: the panel, and things that sit on top of it. */
  --shadow: 0 20px 60px rgba(13, 15, 44, 0.16);
  --shadow-sm: 0 1px 2px rgba(13, 15, 44, 0.06), 0 2px 8px rgba(13, 15, 44, 0.04);

  --font: "Basier Square", "Basiersquare Webfont", "Inter", -apple-system,
          BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* Step numbers and counts. Tabular figures stop a numbered list from shifting
     as it grows past nine. */
  --font-num: "SF Mono", ui-monospace, "Menlo", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

button {
  font: inherit;
  cursor: pointer;
  border: 0;
  border-radius: 10px;
}

button:disabled { cursor: not-allowed; opacity: 0.55; }

.btn-primary {
  background: var(--accent);
  color: #fff;
  padding: 13px 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: 0 1px 2px rgba(44, 67, 184, 0.24), 0 6px 16px rgba(62, 87, 218, 0.22);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.btn-primary:hover:not(:disabled) {
  background: var(--accent-ink);
  box-shadow: 0 1px 2px rgba(44, 67, 184, 0.28), 0 10px 24px rgba(62, 87, 218, 0.28);
}
/* Presses in rather than lifting. A control that rises on click reads as a
   toggle; this one commits an action. */
.btn-primary:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 2px rgba(44,67,184,0.24); }
.btn-primary:disabled { box-shadow: none; }

/* Focus is never removed, only restyled. A voice widget still has to be
   operable from a keyboard. */
:where(button, a):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn-ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  padding: 8px 12px;
  font-size: 13px;
}

.btn-ghost:hover { background: var(--bg-soft); color: var(--ink); }

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

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}