/* The sign-in surfaces (auth, account, access) on the speech.si brand.

   Loaded AFTER site.css and only by those three pages. site.css is shared
   with the admin console, the org pages and the in-app guide, so it is not
   touched; instead this file re-points its role-named tokens at the paper and
   ink palette the marketing pages use (css/landing.css) and fixes the handful
   of rules site.css wrote with a literal colour. Contrast is measured on
   white and on the #FAFAF8 page: every text token here is 4.5:1 or better. */
@font-face{font-family:"Satoshi";font-style:normal;font-weight:300 900;font-display:swap;src:url(/assets/landing/satoshi-variable.woff2) format("woff2")}

:root {
  --shell: #FAFAF8;
  --panel: #FFFFFF;
  --card: #FFFFFF;
  --popover: #FFFFFF;
  --nav-active: #F1F0EC;
  --row-hover: #F6F5F1;
  --chip-hover: #EEEDE9;

  --ink: #161615;
  --text-2: #5D5B56;
  --text-3: #6B6862;
  --placeholder: #6B6862;

  --hairline: #E6E4DF;
  --row-sep: #E6E4DF;
  --divider: #E6E4DF;
  --input-border: #D6D3CC;
  --input-focus: #161615;

  --btn-black: #161615;
  --btn-black-disabled: #D6D3CC;
  --btn-beige: #F1F0EC;

  --chip-purple: #EEEDE9;
  --accent-purple: #161615;
  --teal: #161615;
  --teal-mid: #2E2D2A;
  --teal-fill: #F1F0EC;
  --red: #C8372D;
  --green: #24774A;
  --amber: #A15C07;

  --font-serif: "Satoshi", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-sans: "Satoshi", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --shadow-popover: 0 1px 2px #1616150d, 0 12px 28px -12px #16161533;
  --shadow-modal: 0 1px 2px #1616150a, 0 30px 70px -28px #16161559;
}
/* Same selector as site.css, later in the cascade: light native controls. */
:root:not(:has(.admin-body)) { color-scheme: light; }

:focus-visible { outline-color: var(--ink); }
::selection { background: #E6E4DF; }

.serif-display { font-weight: 700; letter-spacing: -0.035em; line-height: 1.08; }
/* The account page's big numbers were set in the display face at its
   regular weight; numbers on the marketing pages are bold. */
.stat-card .stat-num, .usage-num { font-weight: 700; }

.btn { height: 44px; border-radius: 12px; font-weight: 600; }
.btn-black { box-shadow: inset 0 1px 0 #ffffff1f, 0 10px 24px -14px #161615a6; }
.btn-black:hover { background: #2E2D2A; }
.btn-light { border: 1px solid var(--input-border); }
.btn-light:hover { background: var(--nav-active); }
.btn-ghost:hover { color: var(--ink); }

.input { border-radius: 12px; height: 44px; background: #FFFFFF; }
.input:focus { border-width: 2px; }

.brand .brand-name { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; }
.brand img { border-radius: 9px; }

.mfa-back { background: rgba(22, 22, 21, 0.38); }
.mfa-card { box-shadow: var(--shadow-modal); }
.mfa-card p { color: var(--text-2); }
.mfa-go { color: #FFFFFF; }

/* access.html uses the account page's kicker but never had its style. */
.page-kicker { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); }