/* OnlyFit Leaf / Sage. Load after design-system.css on customer-facing pages.
 * The opt-in theme leaves the administration and native app themes independent.
 */
@layer tokens {
  [data-theme="onlyfit-light"] {
    color-scheme: light;
    --of-leaf: #4c7c24;
    --of-deep: #355d20;
    --of-ink: #173025;
    --of-sage: #eef4e8;
    --of-paper: #ffffff;
    --of-color-page: #ffffff;
    --of-color-page-deep: #f7f9f4;
    --of-color-surface: #eef4e8;
    --of-color-surface-raised: #ffffff;
    --of-color-surface-soft: #f7f9f4;
    --of-color-border: #71806d;
    --of-color-border-subtle: #d6e0d1;
    --of-color-text: #173025;
    --of-color-text-muted: #526057;
    --of-color-text-subtle: #526057;
    --of-color-text-on-brand: #ffffff;
    --of-color-text-on-bright: #173025;
    --of-color-action: #4c7c24;
    --of-color-focus: #173025;
    --of-color-selected: #355d20;
    --of-color-success: #355d20;
    --of-color-warning: #805b12;
    --of-color-error: #b42318;
    --of-color-overlay: rgb(23 48 37 / 60%);
    --of-gradient-brand: linear-gradient(0deg, #4c7c24, #4c7c24);
    --of-gradient-brand-soft: linear-gradient(0deg, #eef4e8, #eef4e8);
    --of-gradient-cta: linear-gradient(0deg, #4c7c24, #4c7c24);
    --of-gradient-promo: linear-gradient(0deg, #4c7c24, #4c7c24);
    --of-gradient-sync: linear-gradient(0deg, #4c7c24, #4c7c24);
    --of-gradient-fade: linear-gradient(180deg, rgb(255 255 255 / 0%), #ffffff 80%);
    --of-font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --of-font-display: var(--of-font-sans);
    --of-font-tech: var(--of-font-sans);
    --of-text-display-xl: clamp(2.25rem, 5.5vw, 4.5rem);
    --of-text-display: clamp(2.25rem, 5vw, 4rem);
    --of-text-title: clamp(1.75rem, 3.5vw, 2.75rem);
    --of-text-heading: clamp(1.5rem, 3vw, 1.75rem);
    --of-text-subheading: 1.125rem;
    --of-text-body-lg: 1.125rem;
    --of-text-body: 1.125rem;
    --of-text-small: 1rem;
    --of-text-micro: 1rem;
    --of-leading-display: 1.11;
    --of-leading-title: 1.21;
    --of-leading-heading: 1.25;
    --of-leading-body: 1.5;
    --of-tracking-display: -0.035em;
    --of-tracking-ui: -0.015em;
    --of-tracking-tech: 0;
    --of-radius-sm: 0.625rem;
    --of-radius-md: 0.75rem;
    --of-radius-lg: 1rem;
    --of-radius-xl: 1rem;
    --of-radius-2xl: 1rem;
    --of-radius-3xl: 1.5rem;
    --of-shadow-panel: 0 0.5rem 2rem rgb(23 48 37 / 7%);
    --of-shadow-object: 0 1rem 2rem rgb(23 48 37 / 10%);
    --of-shadow-action: 0 0 0 transparent;
    --of-shadow-focus: 0 0 0 2px #ffffff;
    --of-highlight-inset: inset 0 0 0 transparent;
    --of-page-gutter: 1.25rem;
    --of-content-lg: 72.5rem;
    --of-site-header-min-block-size: 4.5rem;
    --of-site-header-padding-block: 0.75rem;
    --of-site-header-safe-area: env(safe-area-inset-top, 0px);
    --of-site-header-logo-inline-size: clamp(8rem, 30vw, 9.5rem);
    --of-touch-target: 3rem;
    --of-control-height: 3.5rem;
    --of-cta-height: 3.5rem;
  }
  @media (max-width: 22rem) {
    [data-theme="onlyfit-light"] { --of-page-gutter: 1rem; }
  }
  @media (max-width: 23rem) {
    [data-theme="onlyfit-light"] { --of-site-header-logo-inline-size: 6.25rem; }
  }
}

@layer base {
  [data-theme="onlyfit-light"] :is(.of-display, .of-title, .of-heading, .of-subheading) {
    font-weight: 700;
    text-transform: none;
  }
  [data-theme="onlyfit-light"] :is(.of-eyebrow, .of-tech, .of-microcopy) {
    letter-spacing: 0;
    line-height: 1.5;
    text-transform: none;
  }
  [data-theme="onlyfit-light"] .of-body--large { font-weight: 400; }
  [data-theme="onlyfit-light"] :is(input, select, textarea) { accent-color: var(--of-leaf); }
  [data-theme="onlyfit-light"] ::selection { background: #dbe9cf; color: var(--of-ink); }
}

@layer layout {
  [data-theme="onlyfit-light"] .of-page { background: var(--of-color-page); }
  [data-theme="onlyfit-light"] .of-sticky-action {
    background: linear-gradient(180deg, rgb(255 255 255 / 0%), #ffffff 20%);
  }
}

@layer components {
  [data-theme="onlyfit-light"] .of-button:not(.of-purchase-modal__payment) {
    min-block-size: var(--of-control-height);
    border-radius: 0.625rem;
    padding: 0.875rem 1.25rem;
    box-shadow: none;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.35;
    text-transform: none;
  }
  [data-theme="onlyfit-light"] :is(.of-button--primary, .of-button--promo):not(.of-purchase-modal__payment) {
    background: var(--of-leaf);
    color: #ffffff;
  }
  [data-theme="onlyfit-light"] :is(.of-button--secondary, .of-button--ghost) {
    border-color: var(--of-deep);
    background: #ffffff;
    color: var(--of-deep);
  }
  [data-theme="onlyfit-light"] .of-button__icon {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    background: transparent;
    color: inherit;
  }
  [data-theme="onlyfit-light"] .of-button:not(.of-purchase-modal__payment):is(:disabled, [aria-disabled="true"]) {
    border-color: transparent;
    background: #e7ebe4;
    color: var(--of-color-text-muted);
    filter: none;
    opacity: 1;
  }
  [data-theme="onlyfit-light"] .of-field__control {
    border-width: 1px;
    background: #ffffff;
    font-size: 1.125rem;
    line-height: 1.5;
  }
  [data-theme="onlyfit-light"] :is(.of-field__label, .of-field__hint, .of-field__error) {
    font-size: 1rem;
    line-height: 1.5;
  }
  [data-theme="onlyfit-light"] .of-option { border-color: var(--of-color-border-subtle); }
  [data-theme="onlyfit-light"] .of-option__indicator { background: #ffffff; }
  [data-theme="onlyfit-light"] :is(.of-option:has(:checked), .of-option[data-state="checked"]) {
    border-color: var(--of-deep);
    background: var(--of-sage);
    color: var(--of-ink);
  }
  [data-theme="onlyfit-light"] :is(.of-option:has(:checked), .of-option[data-state="checked"]) .of-option__indicator {
    border-color: var(--of-leaf);
    background: var(--of-leaf);
    color: #ffffff;
  }
  [data-theme="onlyfit-light"] .of-option__indicator::after { color: inherit; }
  [data-theme="onlyfit-light"] .of-language-switcher summary {
    border-color: var(--of-color-border);
    border-radius: 0.625rem;
    background: #ffffff;
    color: var(--of-ink);
    font-size: 1rem;
    font-weight: 600;
  }
  [data-theme="onlyfit-light"] header .of-language-switcher summary {
    border-color: rgb(255 255 255 / 55%);
    background: transparent;
    color: #ffffff;
  }
  [data-theme="onlyfit-light"] .of-language-switcher summary:focus-visible {
    outline: 3px solid var(--of-ink);
    outline-offset: 3px;
  }
  [data-theme="onlyfit-light"] .of-language-switcher__menu {
    border-color: var(--of-color-border-subtle);
    background: #ffffff;
    color: var(--of-ink);
  }
  [data-theme="onlyfit-light"] .of-language-switcher__menu a,
  [data-theme="onlyfit-light"] .of-language-switcher__menu a > span {
    color: var(--of-ink);
    font-size: 1rem;
  }
  [data-theme="onlyfit-light"] .of-language-switcher__menu a[aria-current="page"] {
    background: var(--of-sage);
    color: var(--of-deep);
  }
  [data-theme="onlyfit-light"] .of-app-cta {
    border-color: var(--of-color-border-subtle);
    background: var(--of-sage);
    color: var(--of-ink);
    box-shadow: none;
  }
  [data-theme="onlyfit-light"] .of-app-cta::before { display: none; }
  [data-theme="onlyfit-light"] .of-app-cta__title {
    font-weight: 700;
    line-height: 1.2;
    text-transform: none;
  }
  @media (hover: hover) {
    [data-theme="onlyfit-light"] :is(.of-button--primary, .of-button--promo):hover:not(:disabled, [aria-disabled="true"], .of-purchase-modal__payment) {
      background: var(--of-deep);
      filter: none;
    }
    [data-theme="onlyfit-light"] .of-language-switcher__menu a:hover { background: var(--of-sage); }
  }
}

/* One header geometry contract, above the page-specific legacy layers.
 * Include the safe area once and keep borders from adding an extra pixel. */
:root[data-theme="onlyfit-light"] {
  /* Resolve the homepage gutter before account bodies reset their content gutter. */
  --of-site-header-gutter: var(--of-page-gutter);
}
@media (min-width: 48rem) {
  [data-theme="onlyfit-light"] .funnel-header__inner {
    inline-size: min(100%, var(--of-content-lg));
    padding-inline: var(--of-site-header-gutter);
  }
}
[data-theme="onlyfit-light"] :is(.profile-header__inner, .subscriptions-header__inner) {
  padding-inline:
    max(var(--of-site-header-gutter), env(safe-area-inset-left, 0px))
    max(var(--of-site-header-gutter), env(safe-area-inset-right, 0px));
}
[data-theme="onlyfit-light"] :is(.home-header, .funnel-header, .account-header, .legal-header, .profile-header, .subscriptions-header, .download-page__header) {
  border-block: 0;
}
[data-theme="onlyfit-light"] :is(.home-header__inner, .funnel-header__inner, .account-header, .legal-header__inner, .profile-header__inner, .subscriptions-header__inner, .download-page__header) {
  box-sizing: border-box;
  min-block-size: calc(var(--of-site-header-min-block-size) + var(--of-site-header-safe-area));
  padding-block: calc(var(--of-site-header-padding-block) + var(--of-site-header-safe-area)) var(--of-site-header-padding-block);
}
[data-theme="onlyfit-light"] :is(.home-header__brand, .funnel-brand, .account-header__brand, .legal-header__brand, .profile-header__brand, .subscriptions-header__brand, .download-page__brand) {
  inline-size: var(--of-site-header-logo-inline-size);
  flex-shrink: 0;
}
[data-theme="onlyfit-light"] :is(.home-header__brand, .funnel-brand, .account-header__brand, .legal-header__brand, .profile-header__brand, .subscriptions-header__brand, .download-page__brand) > img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* The legacy foundation has unlayered hover enhancements. Match that cascade
 * level for the light theme without changing the independent admin theme. */
[data-theme="onlyfit-light"] :is(.account-skip-link, .profile-skip-link, .subscriptions-skip-link, .support-skip-link, .unsubscribe-skip-link, .home-skip-link, .funnel-skip-link, .funnel-skip) {
  background: var(--of-ink);
  color: #ffffff;
}

@media (hover: hover) and (pointer: fine) {
  [data-theme="onlyfit-light"] .of-language-switcher summary:hover {
    border-color: var(--of-deep);
    background: var(--of-sage);
    color: var(--of-ink);
  }
  [data-theme="onlyfit-light"] header .of-language-switcher summary:hover {
    border-color: #ffffff;
    background: rgb(255 255 255 / 12%);
    color: #ffffff;
  }
  [data-theme="onlyfit-light"] .of-button:hover:not(:disabled, [aria-disabled="true"]) {
    filter: none;
    transform: none;
  }
  [data-theme="onlyfit-light"] .of-icon-button:hover:not(:disabled) {
    background-color: var(--of-sage);
  }
  [data-theme="onlyfit-light"] .of-option:hover:not(:has(.of-option__control:disabled), [aria-disabled="true"]) {
    border-color: var(--of-deep);
    transform: none;
  }
}