/*
 * Flux theme: B3 Hot & Cold (Hybrid palette), design system v2 (10 October 2026).
 * Source: flux-wellness-brand/brand-identity/Flux-Design-System-B3-Hot-and-Cold-Hybrid.md
 *
 * Quick rules this file encodes:
 * - Backgrounds are Chalk or Ink, never pure white or black.
 * - Text on Heat is always Chalk. Text on Cold is always Ink.
 * - One Heat CTA per view: primary buttons are Heat; secondary buttons are Ink outlines.
 * - No gradients (except the five-step band), no shadows, no rounded "card" clichés.
 */
:root {
  /* Flux brand palette */
  --flux-heat: #b64b2d;
  --flux-cold: #a7d1df;
  --flux-ink: #182a27;
  --flux-chalk: #f4f1ea;
  --flux-lake: #3f5d5e;
  --flux-lantern: #deb775;
  --flux-mist: #dcdad3;
  --flux-text-secondary: #4a544d;
  --flux-on-heat: #f4f1ea;
  --flux-on-cold: #182a27;

  /* Five-step band: the only permitted intermediates, always hot to cold */
  --flux-band-1: #b64b2d;
  --flux-band-2: #da9f8b;
  --flux-band-3: #f4f1ea;
  --flux-band-4: #cee1e5;
  --flux-band-5: #a7d1df;

  /* Flux brand fonts */
  --flux-font-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --flux-font-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Shared rui tokens, mapped to Flux */
  --rui-font-body: var(--flux-font-sans);
  --rui-font-heading: var(--flux-font-sans);
  --rui-font-mono: var(--flux-font-mono);
  --rui-base-font: var(--rui-font-body);

  --rui-color-primary: var(--flux-ink);
  --rui-color-secondary: var(--flux-heat);
  --rui-color-tint: var(--flux-cold);
  --rui-color-dark: var(--flux-ink);
  --rui-color-white: var(--flux-chalk);
  --rui-color-black: var(--flux-ink);
  --rui-color-neutral-30: var(--flux-mist);
  --rui-color-highlight: var(--flux-lantern);
  --rui-color-background: var(--flux-chalk);

  /* Responsive type roles: desktop defaults (B3 sizing framework) */
  --rui-eyebrow-font-size: 13px;
  --rui-eyebrow-line-height: 18px;
  --rui-eyebrow-letter-spacing: 0.06em;
  --rui-display-font-size: 80px;
  --rui-display-line-height: 0.95;
  --rui-hero-heading-font-size: 52px;
  --rui-hero-heading-line-height: 1;
  --rui-heading-font-size: 32px;
  --rui-heading-line-height: 1.1;
  --rui-subheading-font-size: 20px;
  --rui-subheading-line-height: 1.3;
  --rui-body-font-size: 17px;
  --rui-body-line-height: 1.6;
  --rui-button-font-size: 16px;
  --rui-button-line-height: 24px;

  /* Shared button skin: hard edges, flat colour */
  --rui-button-font-family: var(--rui-font-body);
  --rui-button-font-style: normal;
  --rui-button-font-weight: 600;
  --rui-button-letter-spacing: 0;
  --rui-button-border-width: 2px;
  --rui-button-border-radius: 0;
  --rui-button-shadow: none;
  --rui-button-focus-ring: var(--flux-lake);
  --rui-button-primary-border: var(--flux-heat);
  --rui-button-primary-background: var(--flux-heat);
  --rui-button-primary-foreground: var(--flux-on-heat);
  --rui-button-primary-hover-border: var(--flux-ink);
  --rui-button-primary-hover-background: var(--flux-ink);
  --rui-button-primary-hover-foreground: var(--flux-chalk);
  --rui-button-secondary-border: var(--flux-ink);
  --rui-button-secondary-background: transparent;
  --rui-button-secondary-foreground: var(--flux-ink);
  --rui-button-secondary-hover-border: var(--flux-ink);
  --rui-button-secondary-hover-background: var(--flux-ink);
  --rui-button-secondary-hover-foreground: var(--flux-chalk);
  --rui-button-tertiary-border: transparent;
  --rui-button-tertiary-background: transparent;
  --rui-button-tertiary-foreground: var(--flux-ink);
  --rui-button-tertiary-hover-border: transparent;
  --rui-button-tertiary-hover-background: transparent;
  --rui-button-tertiary-hover-foreground: var(--flux-lake);

  /* Announcement: Lake panel, Chalk text (6.34:1). Used for draft / placeholder notes. */
  --rui-announcement-background: var(--flux-lake);
  --rui-announcement-foreground: var(--flux-chalk);
  --rui-announcement-button-border: var(--flux-chalk);
  --rui-announcement-button-border-radius: 0;
  --rui-announcement-button-shadow: none;
  --rui-announcement-button-background: transparent;
  --rui-announcement-button-foreground: var(--flux-chalk);
  --rui-announcement-button-font-family: var(--rui-font-body);
  --rui-announcement-button-font-size: 16px;
  --rui-announcement-button-font-weight: 600;
  --rui-announcement-button-line-height: 24px;
  --rui-announcement-button-focus-ring: var(--flux-cold);
  --rui-announcement-button-hover-border: var(--flux-chalk);
  --rui-announcement-button-hover-background: var(--flux-chalk);
  --rui-announcement-button-hover-foreground: var(--flux-ink);

  /* Content card skin: flat Chalk panel with a Mist hairline */
  --rui-card-background: var(--flux-chalk);
  --rui-card-foreground: var(--flux-ink);
  --rui-card-heading: var(--flux-ink);
  --rui-card-link: var(--flux-ink);
  --rui-card-link-hover: var(--flux-heat);
  --rui-card-border: var(--flux-mist);
  --rui-card-border-radius: 0;
  --rui-card-shadow: none;
  --rui-card-media-background: var(--flux-mist);
  --rui-card-category-background: var(--flux-cold);
  --rui-card-category-foreground: var(--flux-ink);
  --rui-card-control-border: var(--flux-ink);
  --rui-card-control-background: transparent;
  --rui-card-control-foreground: var(--flux-ink);
  --rui-card-control-hover-background: var(--flux-ink);
  --rui-card-control-hover-foreground: var(--flux-chalk);
  --rui-card-control-focus-ring: var(--flux-lake);

  /* FAQs */
  --rui-faqs-divider-color: var(--flux-mist);
  --rui-faqs-focus-color: var(--flux-lake);
  --rui-faqs-link-color: var(--flux-ink);

  /* Hero: solid Ink ground, Chalk type, hard Split bar along the bottom edge */
  --flux-hero-background: var(--flux-ink);
  --flux-hero-foreground: var(--flux-chalk);
  --flux-hero-overlay: linear-gradient(rgba(24, 42, 39, 0.72), rgba(24, 42, 39, 0.72));
}

/* Dark grounds: secondary buttons flip to Chalk outlines */
.rui-hero,
.rix-footer,
.flux-ink-ground {
  --rui-button-secondary-border: var(--flux-chalk);
  --rui-button-secondary-foreground: var(--flux-chalk);
  --rui-button-secondary-hover-border: var(--flux-chalk);
  --rui-button-secondary-hover-background: var(--flux-chalk);
  --rui-button-secondary-hover-foreground: var(--flux-ink);
  --rui-button-primary-hover-border: var(--flux-chalk);
  --rui-button-primary-hover-background: var(--flux-chalk);
  --rui-button-primary-hover-foreground: var(--flux-ink);
  --rui-button-focus-ring: var(--flux-cold);
}

@media (max-width: 1024px) {
  :root {
    --rui-display-font-size: 60px;
    --rui-hero-heading-font-size: 44px;
    --rui-heading-font-size: 28px;
  }
}

@media (max-width: 600px) {
  :root {
    --rui-eyebrow-font-size: 12px;
    --rui-eyebrow-line-height: 16px;
    --rui-display-font-size: 44px;
    --rui-hero-heading-font-size: 34px;
    --rui-heading-font-size: 26px;
    --rui-subheading-font-size: 18px;
    --rui-body-font-size: 16px;
    --rui-button-font-size: 15px;
    --rui-button-line-height: 22px;
    --rui-announcement-button-font-size: 15px;
    --rui-announcement-button-line-height: 22px;
  }
}