/* OakMD homepage redesign — preview-only design tokens */

:root {
  /* Color */
  --oak-canvas: #0B0B0B;
  --oak-surface: #141414;
  --oak-surface-2: #1C1C1C;
  --oak-gold: #C9A24B;
  --oak-gold-dim: #8A6F33;
  --oak-gold-hover: #D4B45F;
  --oak-heading: #FFFFFF;
  --oak-body: #B3ADA3;
  --oak-body-dim: #8A857D;
  --oak-hairline: rgba(201, 162, 75, 0.14);
  --oak-header-scrolled-bg: rgba(11, 11, 11, 0.92);

  /* Type families */
  --oak-font-display: Georgia, "Times New Roman", serif;
  --oak-font-body: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Type scale */
  --oak-text-category: 72px;
  --oak-text-section: 48px;
  --oak-text-card: 20px;
  --oak-text-body: 17px;
  --oak-text-eyebrow: 11px;
  --oak-text-disclaimer: 13px;
  --oak-text-nav: 13px;
  --oak-footer-tagline-size: 0.85rem;
  --oak-footer-disclaimer-size: 0.75rem;
  --oak-footer-link-size: 0.875rem;
  --oak-footer-legal-size: 0.8125rem;

  /* Type treatment */
  --oak-weight-regular: 400;
  --oak-weight-medium: 500;
  --oak-weight-semibold: 600;
  --oak-leading-display: 1.1;
  --oak-leading-card: 1.4;
  --oak-leading-body: 1.6;
  --oak-tracking-display: -0.02em;
  --oak-tracking-utility: 0.18em;
  --oak-tracking-button: 0.04em;

  /* Spacing */
  --oak-space-none: 0;
  --oak-space-2xs: 4px;
  --oak-space-xs: 8px;
  --oak-space-sm: 12px;
  --oak-space-md: 16px;
  --oak-space-lg: 24px;
  --oak-space-xl: 32px;
  --oak-space-2xl: 40px;
  --oak-space-3xl: 48px;
  --oak-section-pad: 128px;

  /* Layout */
  --oak-z-ticker: 100;
  --oak-z-header: 200;
  --oak-z-drawer: 300;
  --oak-z-sticky-cta: 250;
  --oak-header-height: 80px;
  --oak-ticker-height: 36px;
  --oak-header-scroll-threshold: 80;
  --oak-header-blur: 12px;
  --oak-header-logo-height: 24px;
  --oak-footer-logo-height: 46px;
  --oak-shell-icon-size: 24px;
  --oak-shell-chevron-size: 16px;
  --oak-shell-icon-stroke-width: 2;
  --oak-control-size: 44px;
  --oak-footer-brand-max-width: 320px;
  --oak-drawer-transition: 300ms;
  --oak-marquee-duration: 30s;
  --oak-marquee-start: 0%;
  --oak-marquee-end: -50%;
  --oak-offscreen: 100%;
  --oak-opacity-hidden: 0;
  --oak-opacity-visible: 1;
  --oak-size-auto: auto;
  --oak-flex-fixed: 0;
  --oak-flex-fill: 1;
  --oak-accordion-open-rotation: 180deg;
  --oak-viewport-width: 100vw;
  --oak-viewport-height: 100vh;
  --oak-dynamic-viewport-height: 100dvh;
  --oak-max-width: 1240px;
  --oak-gutter: 24px;
  --oak-shell-content-offset: calc(var(--oak-header-height) + var(--oak-ticker-height));
  --oak-header-nav-gap: 16px;
  --oak-mega-grid-columns: repeat(3, minmax(0, 1fr));
  --oak-footer-grid-columns: 2fr repeat(3, minmax(0, 1fr));
  --oak-footer-grid-areas:
    "brand treatments company legal"
    "brand treatments contact legal";
  --oak-footer-bottom-direction: row;
  --oak-desktop-nav-display: block;
  --oak-desktop-actions-display: flex;
  --oak-mobile-trigger-display: none;
  --oak-mobile-cta-display: none;
  --oak-demo-copy-width: 650px;
  --oak-demo-grid-min: 240px;
  --oak-demo-swatch-height: 88px;
  --oak-demo-spacing-track-height: 36px;
  --oak-demo-spacing-max: 192px;
  --oak-fill: 100%;
  --oak-demo-column-layout: repeat(2, minmax(0, 1fr));

  /* Components */
  --oak-hero-image: url("/assets/img/hero.jpg");
  --oak-hero-min-height: 640px;
  --oak-hero-height: max(var(--oak-dynamic-viewport-height), var(--oak-hero-min-height));
  --oak-hero-copy-max-width: 620px;
  --oak-hero-gradient-direction: to right;
  --oak-hero-gradient-start: rgba(11, 11, 11, 0.92);
  --oak-hero-gradient-end: rgba(11, 11, 11, 0.35);
  --oak-hero-gradient-start-stop: 0%;
  --oak-hero-gradient-end-stop: 100%;
  --oak-hero-background-position: center center;
  --oak-hero-content-layer: 1;
  --oak-hero-lead-gap: 0.3em;
  --oak-hero-lead-direction: row;
  --oak-trust-display: flex;
  --oak-trust-divider-display: inline;
  --oak-rotator-width: 285px;
  --oak-rotator-height: 1.2em;
  --oak-rotator-enter-distance: 10px;
  --oak-rotator-underline-offset: -4px;
  --oak-rotator-underline-height: 2px;
  --oak-rotator-underline-origin: left center;
  --oak-word-rotate-interval: 2400ms;
  --oak-word-crossfade: 400ms;
  --oak-rail-height: 64px;
  --oak-rail-fade-width: 32px;
  --oak-z-rail: 150;
  --oak-rail-sticky-top: var(--oak-header-height);
  --oak-rail-justify: center;
  --oak-rail-fade-display: none;
  --oak-rail-mask: none;
  --oak-category-mobile-max: 767;
  --oak-category-observer-root-margin: -144px 0px -55% 0px;
  --oak-category-observer-threshold: 0;
  --oak-visually-hidden-size: 1px;
  --oak-visually-hidden-offset: -1px;
  --oak-visually-hidden-clip: inset(50%);

  /* Category Module */
  --oak-category-hero-min-height: 480px;
  --oak-category-background-layer: 0;
  --oak-category-content-layer: 1;
  --oak-category-image-position: center;
  --oak-category-scrim-direction: to right;
  --oak-category-product-cols: repeat(4, minmax(0, 1fr));
  --oak-product-grid-gap: var(--oak-space-lg);
  --oak-product-grid-display: grid;
  --oak-product-img-aspect: 1 / 1;
  --oak-product-carousel-margin-inline: var(--oak-space-none);
  --oak-product-carousel-padding-inline: var(--oak-space-none);
  --oak-product-carousel-overflow: visible;
  --oak-product-carousel-snap: none;
  --oak-product-card-flex: initial;
  --oak-product-card-mobile-width: 85%;
  --oak-product-card-snap: center;
  --oak-product-placeholder-direction: column;
  --oak-product-placeholder-gap: var(--oak-space-xs);
  --oak-module-actions-justify: flex-end;
  --oak-category-scrim-start: rgba(11, 11, 11, 0.92);
  --oak-category-scrim-end: rgba(11, 11, 11, 0.2);

  /* Diagnostics Section */
  --oak-diag-grid-columns: 7fr 5fr;
  --oak-diag-grid-gap: var(--oak-space-3xl);
  --oak-diagnostics-content-max: 600px;
  --oak-biomarker-row-columns: 140px 1fr;
  --oak-biomarker-row-gap: var(--oak-space-md);
  --oak-biomarker-track-height: 4px;
  --oak-biomarker-dot-size: 12px;
  --oak-biomarker-range-opacity: 0.15;
  --oak-biomarker-center: 50%;
  --oak-biomarker-start: 0%;
  --oak-biomarker-offset: -50%;
  --oak-biomarker-radius: 50%;
  --oak-diagnostics-caption-size: 13px;
  --oak-biomarker-anim-duration: 800ms;
  --oak-biomarker-anim-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --oak-biomarker-stagger: 100ms;
  --oak-biomarker-delay-base: 200ms;
  --oak-marker-1-delay: var(--oak-biomarker-delay-base);
  --oak-marker-2-delay: calc(var(--oak-biomarker-delay-base) + var(--oak-biomarker-stagger));
  --oak-marker-3-delay: calc(var(--oak-biomarker-delay-base) + var(--oak-biomarker-stagger) * 2);
  --oak-marker-4-delay: calc(var(--oak-biomarker-delay-base) + var(--oak-biomarker-stagger) * 3);
  --oak-marker-5-delay: calc(var(--oak-biomarker-delay-base) + var(--oak-biomarker-stagger) * 4);
  --oak-marker-6-delay: calc(var(--oak-biomarker-delay-base) + var(--oak-biomarker-stagger) * 5);
  --oak-marker-7-delay: calc(var(--oak-biomarker-delay-base) + var(--oak-biomarker-stagger) * 6);
  --oak-marker-8-delay: calc(var(--oak-biomarker-delay-base) + var(--oak-biomarker-stagger) * 7);

  --oak-range-1-start: 25%; --oak-range-1-width: 50%; --oak-marker-1-pos: 42%;
  --oak-range-2-start: 20%; --oak-range-2-width: 60%; --oak-marker-2-pos: 35%;
  --oak-range-3-start: 10%; --oak-range-3-width: 40%; --oak-marker-3-pos: 15%;
  --oak-range-4-start: 30%; --oak-range-4-width: 40%; --oak-marker-4-pos: 50%;
  --oak-range-5-start: 0%; --oak-range-5-width: 35%; --oak-marker-5-pos: 20%;
  --oak-range-6-start: 20%; --oak-range-6-width: 50%; --oak-marker-6-pos: 45%;
  --oak-range-7-start: 0%; --oak-range-7-width: 50%; --oak-marker-7-pos: 30%;
  --oak-range-8-start: 30%; --oak-range-8-width: 50%; --oak-marker-8-pos: 60%;

  /* Lower Sections */
  --oak-finder-max: 720px;
  --oak-finder-cols: repeat(3, minmax(0, 1fr));
  --oak-finder-tile-height: 88px;
  --oak-hiw-grid: minmax(0, 1fr) minmax(0, 1fr);
  --oak-hiw-gap: var(--oak-space-3xl);
  --oak-hiw-num-size: 96px;
  --oak-hiw-num-opacity: 0.55;
  --oak-hiw-num-offset-x: -24px;
  --oak-hiw-num-offset-y: -40px;
  --oak-trust-band-cols: repeat(4, minmax(0, 1fr));
  --oak-trust-band-icon-size: 32px;
  --oak-pricing-grid: repeat(3, minmax(0, 1fr));
  --oak-faq-max: 800px;
  --oak-faq-icon-size: 24px;
  --oak-faq-rotation: 45deg;
  --oak-faq-anim-duration: 240ms;
  --oak-final-cta-min: 540px;
  --oak-final-cta-scrim: rgba(11, 11, 11, 0.75);

  --oak-radius: 4px;
  --oak-border-width: 1px;
  --oak-button-pad-block: 12px;
  --oak-button-pad-inline: 24px;
  --oak-card-pad: clamp(24px, 4vw, 32px);
  --oak-bullet-size: 5px;
  --oak-bullet-offset: 20px;
  --oak-bullet-position: 0.62em;

  /* Focus and motion */
  --oak-focus-width: 2px;
  --oak-focus-offset: 2px;
  --oak-reveal-distance: 16px;
  --oak-reveal-duration: 400ms;
  --oak-reveal-ease: ease-out;
  --oak-stagger: 60ms;
  --oak-hover-duration: 180ms;
}

@media (max-width: 1179px) {
  :root {
    --oak-desktop-nav-display: none;
    --oak-desktop-actions-display: none;
    --oak-mobile-trigger-display: inline-flex;
    --oak-category-product-cols: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  :root {
    --oak-footer-grid-columns: repeat(2, minmax(0, 1fr));
    --oak-footer-grid-areas:
      "brand brand"
      "treatments company"
      "legal contact";
    --oak-diag-grid-columns: 1fr;
    --oak-trust-band-cols: repeat(2, minmax(0, 1fr));
    --oak-hiw-grid: 1fr;
  }
}

@media (max-width: 767px) {
  :root {
    --oak-text-category: 40px;
    --oak-text-section: 32px;
    --oak-text-card: 18px;
    --oak-text-body: 16px;
    --oak-gutter: 20px;
    --oak-section-pad: 72px;
    --oak-demo-column-layout: 1fr;
    --oak-footer-grid-columns: 1fr;
    --oak-footer-grid-areas:
      "brand"
      "treatments"
      "company"
      "legal"
      "contact";
    --oak-footer-bottom-direction: column;
    --oak-mobile-cta-display: block;
    --oak-hero-background-position: 62% center;
    --oak-hero-lead-direction: column;
    --oak-trust-display: grid;
    --oak-trust-divider-display: none;
    --oak-rotator-width: 100%;
    --oak-rail-justify: flex-start;
    --oak-rail-fade-display: block;
    --oak-rail-mask:
      linear-gradient(
        to right,
        transparent,
        black var(--oak-rail-fade-width),
        black calc(var(--oak-fill) - var(--oak-rail-fade-width)),
        transparent
      );
    --oak-biomarker-row-columns: 110px 1fr;
    --oak-category-hero-min-height: 360px;
    --oak-product-grid-display: flex;
    --oak-product-carousel-margin-inline: calc(var(--oak-gutter) * -1);
    --oak-product-carousel-padding-inline: var(--oak-gutter);
    --oak-product-carousel-overflow: auto;
    --oak-product-carousel-snap: x mandatory;
    --oak-product-card-flex: var(--oak-flex-fixed) var(--oak-flex-fixed) var(--oak-product-card-mobile-width);
    --oak-module-actions-justify: flex-start;
    --oak-finder-cols: 1fr;
    --oak-trust-band-cols: 1fr;
    --oak-pricing-grid: 1fr;
    --oak-hiw-num-offset-x: 0;
    --oak-hiw-num-offset-y: -60px;
  }
}