/* AppHatch violet theme — place AFTER Bootstrap CSS */
:root{
  /* Palette */
  --ah-primary-700:#4c1d95;
  --ah-primary-600:#5b21b6;
  --ah-primary:#6d28d9;     /* base */
  --ah-primary-500:#7c3aed;
  --ah-primary-300:#c4b5fd;
  --ah-primary-100:#ede9fe;

  /* Bootstrap color tokens */
  --bs-primary: var(--ah-primary);
  --bs-primary-rgb: 109,40,217;
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: var(--ah-primary-600);
  --bs-focus-ring-color: rgba(var(--bs-primary-rgb),.25);

  /* Emphasis & subtle variants */
  --bs-primary-text-emphasis:#3b0764;
  --bs-primary-bg-subtle: var(--ah-primary-100);
  --bs-primary-border-subtle: var(--ah-primary-300);
}

/* Buttons */
.btn-primary{
  --bs-btn-color:#fff;
  --bs-btn-bg:var(--bs-primary);
  --bs-btn-border-color:var(--bs-primary);
  --bs-btn-hover-bg:var(--ah-primary-600);
  --bs-btn-hover-border-color:var(--ah-primary-600);
  --bs-btn-active-bg:var(--ah-primary-700);
  --bs-btn-active-border-color:var(--ah-primary-700);
  --bs-btn-disabled-bg:var(--bs-primary);
  --bs-btn-disabled-border-color:var(--bs-primary);
  --bs-btn-focus-shadow-rgb:var(--bs-primary-rgb);
}
.btn-outline-primary{
  --bs-btn-color:var(--bs-primary);
  --bs-btn-border-color:var(--bs-primary);
  --bs-btn-hover-bg:var(--bs-primary);
  --bs-btn-hover-border-color:var(--bs-primary);
  --bs-btn-active-bg:var(--ah-primary-700);
  --bs-btn-active-border-color:var(--ah-primary-700);
  --bs-btn-focus-shadow-rgb:var(--bs-primary-rgb);
}

/* Common components picking up primary */
.bg-primary{ background-color:var(--bs-primary)!important; }
.text-primary{ color:var(--bs-primary)!important; }
.border-primary{ border-color:var(--bs-primary)!important; }
.alert-primary{
  --bs-alert-bg:var(--bs-primary-bg-subtle);
  --bs-alert-border-color:var(--bs-primary-border-subtle);
  --bs-alert-color:var(--bs-primary-text-emphasis);
}
.nav-pills .nav-link.active,
.nav-link.active{ background-color:var(--bs-primary); }
.progress-bar{ background-color:var(--bs-primary); }
.form-check-input:checked{
  background-color:var(--bs-primary);
  border-color:var(--bs-primary);
  box-shadow:0 0 0 .25rem rgba(var(--bs-primary-rgb),.25);
}
.form-range::-webkit-slider-thumb{ background-color:var(--bs-primary); }
.form-range::-moz-range-thumb{ background-color:var(--bs-primary); }

/* Optional gradient helpers (for hero/CTA) */
.bg-violet-gradient{
  background:linear-gradient(135deg,#4c1d95 0%,#6d28d9 40%,#7c3aed 70%,#8b5cf6 100%);
}
.btn-primary.gradient{
  background-image:linear-gradient(135deg,#6d28d9 0%,#7c3aed 60%,#8b5cf6 100%);
  border-color:transparent;
}
.btn-primary.gradient:hover{ filter:brightness(1.05); }

  .bg-hero
  {
        background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    background-image: url(https://apphat.ch/hero2.svg);
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;

  }


  #myh1
  {
      margin:auto; max-width:700px; font-weight: 500;
      font-family: "Stack Sans Notch", sans-serif;
  }

  @media (min-width: 1200px) {


    #myh1
    {
        max-width:850px;
        font-size:3.6em ;
        letter-spacing: -2px;
    }


  }