/*
 * Shared tokens for every MarriageScience calculator.
 *
 * Values are the site's own brand ramp, taken from the logo (#1d0f6b) and the
 * live theme variables, so a tool never looks pasted in. Typography is
 * deliberately absent: calculators inherit the theme's font stack and only set
 * size, weight and line-height, which keeps them correct through a re-theme.
 *
 * Everything is scoped under .ms-calc. No bare element selectors.
 */

.ms-calc {
  /* brand ramp */
  --ms-ink:          #1d0f6b;
  --ms-navy:         #201962;
  --ms-primary-dark: #271e7e;
  --ms-primary:      #3a2bbc;
  --ms-accent:       #4c3bf4;

  /* surfaces derived from the accent */
  --ms-surface-1:    #f4f3fe;
  --ms-surface-2:    #eae7fe;
  --ms-border:       #cdc8fc;

  /* neutrals */
  --ms-white:        #ffffff;
  --ms-text:         #1a1a2e;
  --ms-text-muted:   #5a5a72;

  /* the under-18 notice, and nothing else */
  --ms-notice-bg:     #fff8e6;
  --ms-notice-border: #e0a800;
  --ms-notice-text:   #5c4300;

  /* scale */
  --ms-radius:    10px;
  --ms-radius-lg: 16px;
  --ms-gap:       clamp(12px, 2vw, 20px);
  --ms-shadow:    0 1px 2px rgba(29, 15, 107, .06), 0 8px 24px rgba(29, 15, 107, .08);
  --ms-focus:     0 0 0 3px rgba(76, 59, 244, .35);

  /* UI chrome and numbers use the theme's display face, the same one the nav,
     buttons and card titles use. Prose inside the tool keeps the body font. */
  --ms-ui-font: var(--office-nexus-global, inherit);

  color: var(--ms-text);
  line-height: 1.5;
  box-sizing: border-box;
}

.ms-calc *,
.ms-calc *::before,
.ms-calc *::after { box-sizing: inherit; }

.ms-calc :focus-visible {
  outline: none;
  box-shadow: var(--ms-focus);
  border-radius: 6px;
}

.ms-calc__btn {
  appearance: none;
  font-family: var(--ms-ui-font);
  border: 1px solid transparent;
  background: var(--ms-primary);
  color: var(--ms-white);
  border-radius: var(--ms-radius);
  padding: 10px 18px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}

.ms-calc__btn:hover { background: var(--ms-primary-dark); }

.ms-calc__btn--ghost {
  background: transparent;
  color: var(--ms-primary-dark);
  border-color: var(--ms-border);
}

.ms-calc__btn--ghost:hover { background: var(--ms-surface-1); }

.ms-calc__attribution {
  margin: 14px 0 0;
  font-size: .8125rem;
  color: var(--ms-text-muted);
}

.ms-calc__attribution a { color: var(--ms-primary-dark); }

@media print {
  .ms-calc__actions,
  .ms-calc__embed-box,
  .ms-calc__modes { display: none !important; }
}