/* INSTINC ACE: loaded after /style.css on the INSTINC host only. Sets the INSTINC tokens, the brand mark,
   and re-declares the rules of style.css whose colors are not INSTINC's. Montserrat is served from /fonts. */

@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/montserrat-latin-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/montserrat-latin-500.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Montserrat;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/montserrat-latin-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --brand-primary: #48787E;
  --brand-secondary: #D9A96C;
  --brand-ink: #1A2738;
  --brand-outline: #1A2738;
  --brand-background: #FFFFFF;
  --paper: #F6F3EC;
  --instinc-bronze: #7C5D35;
  --instinc-teal: #6CAEBA;
  --instinc-cream-soft: rgba(246, 243, 236, 0.72);
  --blue-light: var(--instinc-teal);
  --sans: Montserrat, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  /* The brand has no serif: headings and emphasis use the same faces as the text. */
  --serif: var(--sans);
}

/* Montserrat has no kana or kanji: Japanese falls back to a Japanese face, not a Traditional Chinese one. */
:root:lang(ja) {
  --sans: Montserrat, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

/* ---- brand mark ---- */

.brand-logo {
  display: block;
  width: auto;
  height: 32px;
}

.brand-descriptor {
  margin-left: 0.9rem;
  color: var(--instinc-bronze);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.4em;
}

.brand--light .brand-descriptor {
  color: var(--brand-secondary);
}

/* ---- type and color on the two surfaces: navy takes cream and gold, cream takes navy and bronze ---- */

.setup-intro,
.access-story {
  color: var(--paper);
}

.eyebrow,
.setup-lede,
.privacy-note,
.access-copy > p:last-child,
.access-signal,
.step-rail li {
  color: var(--instinc-cream-soft);
}

.step-rail li.is-active {
  color: var(--paper);
}

.eyebrow > span {
  background: var(--brand-secondary);
}

.setup-intro h1 em,
.access-copy h1 em {
  color: var(--brand-secondary);
  font-style: normal;
  font-weight: 500;
}

.section-index {
  color: var(--instinc-bronze);
}

.step-rail li > span {
  color: var(--instinc-teal);
}

.signal-order,
.advanced-plan-section .signal-order {
  color: var(--instinc-bronze);
}

input::placeholder {
  color: #5b5e66;
  opacity: 1;
}

/* ---- rules of style.css whose colors are not INSTINC's ---- */

.app-header {
  background: rgba(246, 243, 236, 0.96);
}

.preview-status i {
  box-shadow: 0 0 0 4px rgba(217, 169, 108, 0.18);
}

.setup-intro::after {
  border-color: rgba(108, 174, 186, 0.25);
  box-shadow: 0 0 0 5rem rgba(72, 120, 126, 0.12),
    0 0 0 10rem rgba(72, 120, 126, 0.07);
}

.checkbox-pill:has(input:checked) {
  background: rgba(72, 120, 126, 0.1);
  color: #2c5157;
}

.draft-banner {
  border-color: rgba(72, 120, 126, 0.34);
  background: rgba(72, 120, 126, 0.1);
  color: #1f3a3f;
}

input.draft-filled,
select.draft-filled {
  background: rgba(72, 120, 126, 0.09);
}

.activity-panel {
  border-color: rgba(72, 120, 126, 0.36);
  background: rgba(72, 120, 126, 0.07);
}

.access-story::before,
.access-story::after {
  border-color: rgba(108, 174, 186, 0.22);
}

.access-story::after {
  border-color: rgba(108, 174, 186, 0.4);
  box-shadow: 0 0 100px rgba(108, 174, 186, 0.16);
}

.access-signal i {
  background: rgba(108, 174, 186, 0.5);
}