/*!
 * BetterYou Co — Design Tokens
 * -----------------------------------------------------------------------
 * Single source of truth for color, type, spacing, radius, shadow,
 * motion and breakpoint values used across the whole website. Every
 * other stylesheet in theme_web_new/ reads these custom properties
 * instead of hardcoding values — change a token here, it changes
 * everywhere.
 *
 * Values are lifted directly from the Flutter app's own theme files
 * (lib/theme/app_colors.dart, app_theme.dart) so the website matches
 * the app rather than inventing a parallel palette.
 * -----------------------------------------------------------------------
 */

:root {
  /* ---------------------------------------------------------------
   * Color — surfaces
   * --------------------------------------------------------------- */
  --by-bg: #F7F2EF;                 /* page background (cream) */
  --by-bg-gradient: linear-gradient(160deg, #FBEFEA 0%, #F7F2EF 42%, #F5EEF4 100%);
  --by-blob-peach: #FAEEE5;
  --by-blob-pink: #F7E8F3;
  --by-surface: #FFFFFF;            /* cards, inputs, popovers */
  --by-surface-alt: #FBF8F6;        /* subtle alternate surface, e.g. table stripes */
  --by-outline: #F0EEEA;            /* hairline borders, dividers */

  /* ---------------------------------------------------------------
   * Color — brand
   * --------------------------------------------------------------- */
  --by-primary: #527C31;
  --by-primary-dark: #3F5528;
  --by-primary-light: #8BBB82;
  --by-primary-tint: #ECFDF3;       /* light green wash for selected states */
  --by-gold: #C08A2A;               /* "Co" wordmark accent */
  --by-secondary-btn: #DFDFDF;

  /* ---------------------------------------------------------------
   * Color — text
   * --------------------------------------------------------------- */
  --by-heading: #242424;
  --by-body: #685355;
  --by-body-muted: #756164; /* darkened from #9C8A8B — that value only hit 2.9-3.3:1 contrast (fails WCAG AA's 4.5:1 for normal text); this hits 5.2-5.8:1 on both the cream page bg and white cards while keeping the same warm hue */

  /* ---------------------------------------------------------------
   * Color — icon & supporting accents
   * --------------------------------------------------------------- */
  --by-icon-teal: #047857;
  --by-icon-purple: #7E22CE;
  --by-support-teal: #008E7F;
  --by-support-lavender: #8D7CBA;
  --by-support-terracotta: #9C5E33; /* darkened from #DF9262 — that value hit only 2.2-2.5:1 as text (the .by-eyebrow label on nearly every page, plus the "Mild" severity badge); this hits 4.65-5.17:1 on cream/pale-gold/white */

  /* ---------------------------------------------------------------
   * Color — tag / badge palette (small accents only, never large areas)
   * --------------------------------------------------------------- */
  --by-tag-dark-green: #054F31;
  --by-tag-mint: #A6F4C5;
  --by-tag-pale-mint: #ECFDF3;
  --by-tag-pale-lavender: #FAF5FF;
  --by-tag-lavender: #E9D5FF;
  --by-tag-gold: #FEDE82;
  --by-tag-pale-gold: #FFF8E1;
  --by-tag-orange: #A34606; /* darkened from #FB6E0A — only 2.4:1 as the "Moderate" severity badge's text color; this hits 5.1:1 on its pale-orange background */
  --by-tag-pale-orange: #FDE6DC;
  --by-tag-brown: #7B513B;
  --by-tag-tan: #D6BFAE;

  /* ---------------------------------------------------------------
   * Color — semantic (severity / status), derived from the tag palette
   * --------------------------------------------------------------- */
  --by-severity-minimal-bg: var(--by-tag-pale-mint);
  --by-severity-minimal-fg: var(--by-tag-dark-green);
  --by-severity-mild-bg: var(--by-tag-pale-gold);
  --by-severity-mild-fg: var(--by-support-terracotta);
  --by-severity-moderate-bg: var(--by-tag-pale-orange);
  --by-severity-moderate-fg: var(--by-tag-orange);
  --by-severity-severe-bg: #FCE4E4;
  --by-severity-severe-fg: #A93225; /* darkened slightly from #C0392B — that landed right at the 4.5:1 boundary (4.495, fails on rounding); this clears it at 5.48:1 */

  /* ---------------------------------------------------------------
   * Typography
   * --------------------------------------------------------------- */
  --by-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --by-fs-display: 3.25rem;   /* 52px hero headline */
  --by-fs-h1: 2.25rem;        /* 36px section heading */
  --by-fs-h2: 1.75rem;        /* 28px card/quiz heading */
  --by-fs-h3: 1.25rem;        /* 20px */
  --by-fs-h4: 1.0625rem;      /* 17px */
  --by-fs-body-lg: 1.125rem;  /* 18px */
  --by-fs-body: 1rem;         /* 16px */
  --by-fs-body-sm: 0.875rem;  /* 14px */
  --by-fs-caption: 0.8125rem; /* 13px */
  --by-fs-eyebrow: 0.8125rem; /* 13px, uppercase, letter-spaced */

  --by-fw-regular: 400;
  --by-fw-medium: 500;
  --by-fw-semibold: 600;
  --by-fw-bold: 700;

  --by-lh-tight: 1.15;
  --by-lh-snug: 1.35;
  --by-lh-normal: 1.6;

  /* ---------------------------------------------------------------
   * Spacing scale (4px base)
   * --------------------------------------------------------------- */
  --by-space-1: 0.25rem;
  --by-space-2: 0.5rem;
  --by-space-3: 0.75rem;
  --by-space-4: 1rem;
  --by-space-5: 1.5rem;
  --by-space-6: 2rem;
  --by-space-7: 2.5rem;
  --by-space-8: 3rem;
  --by-space-9: 4rem;
  --by-space-10: 5rem;
  --by-space-11: 6.5rem;

  /* ---------------------------------------------------------------
   * Radius — generous and rounded, pill-shaped controls
   * --------------------------------------------------------------- */
  --by-radius-sm: 10px;
  --by-radius-md: 14px;
  --by-radius-lg: 20px;
  --by-radius-xl: 28px;
  --by-radius-pill: 999px;

  /* ---------------------------------------------------------------
   * Shadow — soft, warm-tinted, never harsh
   * --------------------------------------------------------------- */
  --by-shadow-sm: 0 2px 8px -2px rgba(66, 48, 40, 0.08);
  --by-shadow-md: 0 12px 32px -12px rgba(66, 48, 40, 0.16);
  --by-shadow-lg: 0 24px 60px -20px rgba(66, 48, 40, 0.20);
  --by-shadow-primary: 0 10px 24px -8px rgba(82, 124, 49, 0.35);

  /* ---------------------------------------------------------------
   * Motion
   * --------------------------------------------------------------- */
  --by-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --by-duration-fast: 150ms;
  --by-duration-base: 250ms;
  --by-duration-slow: 500ms;

  /* ---------------------------------------------------------------
   * Layout
   * --------------------------------------------------------------- */
  --by-container-max: 1240px;
  --by-header-height: 84px;
}

/* -----------------------------------------------------------------
 * Breakpoints (documented here; enforced via media queries in
 * layout.css / components.css since CSS custom properties cannot be
 * used inside @media conditions themselves):
 *   xs  <576px   phones
 *   sm  >=576px  large phones
 *   md  >=768px  tablets
 *   lg  >=992px  small desktops
 *   xl  >=1200px desktops
 * These mirror Bootstrap 5's own grid breakpoints so utility classes
 * (col-md-6, d-lg-flex, ...) stay in sync with our own responsive
 * rules.
 * ----------------------------------------------------------------- */