:root {
  --cti-primary: #4C7B69;
  --cti-primary-dark: #2D584A;
  --cti-primary-soft: #CFE5DC;
  --cti-surface: #F7FBF9;
  --cti-surface-alt: #E8F2EE;
  --cti-ink: #20352E;
  --cti-outline: #C9DAD3;
}

html { scroll-padding-top: 5.25rem; }
body { background-color: var(--cti-surface); color: var(--cti-ink); overflow-x: clip; }
img { max-width: 100%; }
section[id] { scroll-margin-top: 5.25rem; }
a, button, input, textarea, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(76, 123, 105, .42); outline-offset: 3px; }

.bg-background { background-color: var(--cti-surface); }
.bg-surface-container { background-color: var(--cti-surface-alt); }
.bg-primary { background-color: var(--cti-primary); }
.bg-primary\/5 { background-color: rgba(76, 123, 105, .05); }
.bg-primary\/30 { background-color: rgba(76, 123, 105, .3); }
.text-on-surface { color: var(--cti-ink); }
.text-on-surface\/40 { color: rgba(32, 53, 46, .4); }
.text-on-surface\/60 { color: rgba(32, 53, 46, .6); }
.text-on-surface\/70 { color: rgba(32, 53, 46, .7); }
.text-on-surface\/80 { color: rgba(32, 53, 46, .8); }
.text-primary { color: var(--cti-primary); }
.text-primary\/40 { color: rgba(76, 123, 105, .4); }
.text-primary-container { color: var(--cti-primary-soft); }
.border-outline-variant { border-color: var(--cti-outline); }
.border-outline-variant\/20 { border-color: rgba(201, 218, 211, .2); }
.border-outline-variant\/30 { border-color: rgba(201, 218, 211, .3); }
.border-outline-variant\/40 { border-color: rgba(201, 218, 211, .4); }
.border-outline-variant\/60 { border-color: rgba(201, 218, 211, .6); }
.divide-outline-variant\/40 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(201, 218, 211, .4); }
.focus\:border-primary:focus { border-color: var(--cti-primary); }
.focus\:ring-primary:focus { --tw-ring-color: var(--cti-primary); }
.accent-primary { accent-color: var(--cti-primary); }
.btn-primary, .btn-premium { background-color: var(--cti-primary); }
.btn-primary:hover, .btn-premium:hover { background-color: var(--cti-primary-dark); }
.label-uppercase { color: var(--cti-primary); }
.border-draw::after { background-color: var(--cti-primary); }

@media (max-width: 767px) {
  .section-container { padding-left: 1.25rem; padding-right: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
  .js-enabled .reveal:not(.active),
  .js-enabled .reveal-scale:not(.active) { opacity: 1; transform: none; }
}
