/* Buttons, text links and the frosted-glass surfaces of the public pages. */

  /* ——— Buttons and text links ——— */

  .kl__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-sans);
    font-size: .9375rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .04em;
    text-align: center;
    padding: 15px 28px;
    border: 1px solid transparent;
    border-radius: var(--radius-btn);
    cursor: pointer;
    transition: filter .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  }
  /* The one strong action of a page: a garnet gradient with a light top edge. */
  .kl__btn--primary {
    color: var(--white);
    border-color: rgb(255 255 255 / .18);
    background: linear-gradient(135deg, var(--accent-bright) 0%, var(--accent) 48%, var(--accent-deep) 100%);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .28),
      0 14px 28px -14px color-mix(in srgb, var(--accent) 75%, transparent);
  }
  .kl__btn--primary:hover { filter: brightness(1.08); }
  /* The second action: frosted glass with a garnet hairline — clearly weaker than the primary one. */
  .kl__btn--secondary {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 28%, transparent);
    background: linear-gradient(135deg, rgb(255 255 255 / .75), rgb(255 255 255 / .35));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / .9),
      0 10px 24px -18px color-mix(in srgb, var(--accent) 50%, transparent);
  }
  .kl__btn--secondary:hover { background: rgb(255 255 255 / .85); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
  .kl__btn--sm { padding: 10px 20px; font-size: .875rem; }
  .kl__btn--block { width: 100%; margin-top: 6px; }

  /* A text link: garnet with a pale underline that darkens on hover. */
  /* `.kl .kl__link`: .kl a (text-decoration: none) is more specific than a single class. */
  .kl .kl__link {
    display: inline-block;
    color: var(--accent);
    font-size: .9375rem;
    text-decoration: underline;
    text-decoration-color: var(--accent-pale);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    transition: color .18s ease, text-decoration-color .18s ease;
  }
  .kl .kl__link:hover { color: var(--accent-dark); text-decoration-color: currentColor; }

  /* ——— Surfaces ——— */

  /* Every Rails page lies on the page gradient, painted on the whole .kl wrapper, so the navbar and the footer lie on
     it without a seam; the landing has its own variant (--atmosphere-landing). */
  body > .kl:not(.spa-site-nav) { background: var(--atmosphere), var(--paper); }
  body > .kl:has(> .kl__landing) { background: var(--atmosphere-landing), var(--paper); }

  /* Frosted glass panels. Listed here rather than as a utility class, so the views keep one class per element. */
  .kl__contact-card,
  .kl__auth-card,
  .kl__card,
  .kl__legal-body,
  .kl__catalog-nav,
  .kl__catalog-empty,
  .kl__product-perks {
    background: var(--glass-fill);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-edge);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-glass);
  }