/* DPT Consulting Academy — shared tokens and primitives
   Palette and type taken from dentalpracticetransitions.henryschein.com:
   Henry Schein blue on white, deep teal panels, pale blue tints, warm grey
   body copy, pill buttons and generous rounding.

   The brand face is Futura Std, which is not web-licensed. Jost is the
   closest freely available geometric sans and is used in its place. */

:root {
  /* surface */
  --paper:        #ffffff;
  --paper-raised: #ffffff;
  --paper-sunk:   #f2f7fb;
  --wash:         #e6f0f7;
  --wash-deep:    #dceaf4;

  /* ink */
  --ink:          #181d27;
  --ink-soft:     #535862;
  --ink-faint:    #717680;
  --rule:         #e9eaeb;
  --rule-strong:  #c7c8ca;

  /* brand */
  --hs-blue:      #0072bc;
  --hs-blue-deep: #005a95;
  --teal:         #006272;
  --teal-deep:    #00505e;
  --teal-tint:    #ecf3f4;
  --seal:         #0072bc;
  --seal-deep:    #005a95;
  --seal-tint:    #e6f0f7;
  --on-seal:      #ffffff;
  --hs-red:       #ed1c24;

  /* authority — traffic-light semantics, tuned to sit beside the brand blue */
  --you:          #0f7b55;
  --you-tint:     #e6f4ee;
  --rsm:          #9a6b10;
  --rsm-tint:     #fdf3de;
  --never:        #c02b0a;
  --never-tint:   #fdeae6;

  /* feedback */
  --right:        #0f7b55;
  --right-tint:   #e6f4ee;
  --wrong:        #c02b0a;
  --wrong-tint:   #fdeae6;

  /* type */
  --display: "Jost", "Futura Std", "Century Gothic", Avenir, sans-serif;
  --body:    "Jost", "Futura Std", -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* measure & rhythm */
  --measure: 70ch;
  --radius:  10px;
  --radius-sm: 6px;
  --pill:    999px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:        #0f141b;
    --paper-raised: #161d26;
    --paper-sunk:   #131a23;
    --wash:         #14222e;
    --wash-deep:    #162a38;
    --ink:          #eef1f4;
    --ink-soft:     #b3bcc6;
    --ink-faint:    #8793a0;
    --rule:         #273240;
    --rule-strong:  #3a4654;
    --hs-blue:      #4aa8e4;
    --hs-blue-deep: #7cc4f2;
    --teal:         #4fb0c0;
    --teal-deep:    #7fcad6;
    --teal-tint:    #15282d;
    --seal:         #4aa8e4;
    --seal-deep:    #7cc4f2;
    --seal-tint:    #14222e;
    --on-seal:      #0b1017;
    --you:          #5cc097;
    --you-tint:     #11271f;
    --rsm:          #e0b05f;
    --rsm-tint:     #2a2115;
    --never:        #f08a73;
    --never-tint:   #2e1712;
    --right:        #5cc097;
    --right-tint:   #11271f;
    --wrong:        #f08a73;
    --wrong-tint:   #2e1712;
  }
}

:root[data-theme="dark"] {
  --paper:        #0f141b;
  --paper-raised: #161d26;
  --paper-sunk:   #131a23;
  --wash:         #14222e;
  --wash-deep:    #162a38;
  --ink:          #eef1f4;
  --ink-soft:     #b3bcc6;
  --ink-faint:    #8793a0;
  --rule:         #273240;
  --rule-strong:  #3a4654;
  --hs-blue:      #4aa8e4;
  --hs-blue-deep: #7cc4f2;
  --teal:         #4fb0c0;
  --teal-deep:    #7fcad6;
  --teal-tint:    #15282d;
  --seal:         #4aa8e4;
  --seal-deep:    #7cc4f2;
  --seal-tint:    #14222e;
  --on-seal:      #0b1017;
  --you:          #5cc097;
  --you-tint:     #11271f;
  --rsm:          #e0b05f;
  --rsm-tint:     #2a2115;
  --never:        #f08a73;
  --never-tint:   #2e1712;
  --right:        #5cc097;
  --right-tint:   #11271f;
  --wrong:        #f08a73;
  --wrong-tint:   #2e1712;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-weight: 300; }

a { color: var(--hs-blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }

:focus-visible {
  outline: 2px solid var(--hs-blue);
  outline-offset: 2px;
  border-radius: 3px;
}

button { font: inherit; color: inherit; }

/* ---- the Academy lockup ------------------------------------------------
   Official Henry Schein Dental Practice Transitions logo, unaltered, then a
   thin rule, then the Academy name. See copy/brand-kit.md, section 8. */

.lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}
.lockup-logo {
  display: block;
  height: 26px;   /* the artwork's native height */
  width: auto;
  flex: none;
}
.lockup-rule {
  width: 1px;
  height: 1.5rem;
  background: var(--rule-strong);
  flex: none;
}
.lockup-name {
  font-family: var(--display);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1;
}

/* The wordmark is black, so on dark surfaces it sits on a white panel rather
   than being recoloured. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lockup-logo {
    background: #fff;
    padding: 5px 8px;
    border-radius: 4px;
    box-sizing: content-box;
  }
}
:root[data-theme="dark"] .lockup-logo {
  background: #fff;
  padding: 5px 8px;
  border-radius: 4px;
  box-sizing: content-box;
}

/* Narrow screens: stack the name under the logo so neither shrinks. */
@media (max-width: 34rem) {
  .lockup { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
  .lockup-rule { display: none; }
  .lockup-logo { height: 20px; }
  .lockup-name { font-size: 0.6rem; letter-spacing: 0.1em; }
}

/* ---- the authority chip: carried over, re-skinned ---------------------- */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--display);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.22em 0.7em;
  border: 1px solid currentColor;
  border-radius: var(--pill);
  white-space: nowrap;
  vertical-align: 0.1em;
}
.chip::before {
  content: "";
  width: 0.4em;
  height: 0.4em;
  background: currentColor;
  border-radius: 50%;
  flex: none;
}
.chip-you   { color: var(--you);   background: var(--you-tint); }
.chip-rsm   { color: var(--rsm);   background: var(--rsm-tint); }
.chip-never { color: var(--never); background: var(--never-tint); }
.chip-never::before { border-radius: 0; transform: rotate(45deg); }

/* ---- the internal-use stamp -------------------------------------------- */

.stamp {
  display: inline-block;
  font-family: var(--display);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--never);
  background: var(--never-tint);
  border: 1px solid currentColor;
  border-radius: var(--pill);
  padding: 0.22em 0.7em;
}

/* ---- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.62rem 1.4rem;
  border: 1px solid var(--hs-blue);
  border-radius: var(--pill);
  background: var(--hs-blue);
  color: var(--on-seal);
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease, transform 90ms ease;
}
.btn:hover:not(:disabled) { background: var(--hs-blue-deep); border-color: var(--hs-blue-deep); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-quiet {
  background: transparent;
  color: var(--hs-blue);
  border-color: var(--rule-strong);
}
.btn-quiet:hover:not(:disabled) {
  background: var(--seal-tint);
  border-color: var(--hs-blue);
  color: var(--hs-blue);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}