/*! Coverforce Framework - Variables | Alpha */
:root {
  /* Official Coverforce palette */
  --cf-yellow: #ffcb03;
  --cf-yellow-100: #fff7d8;
  --cf-yellow-200: #ffedaa;
  --cf-yellow-300: #ffe582;
  --cf-yellow-400: #ffddb5;
  --cf-yellow-500: #ffcb03;

  --cf-gradient-stop-1: #fec308;
  --cf-gradient-stop-2: #fcb70e;
  --cf-gradient-stop-3: #faa715;
  --cf-mango: #f7931d; /* Use sparingly; usually stop at --cf-gradient-stop-3. */

  --cf-black: #000000;
  --cf-charcoal: #141414;
  --cf-ink: #1e1e1e;
  --cf-grey-900: #3f3f3f;
  --cf-grey-800: #595959;
  --cf-grey-700: #7f7f7f;
  --cf-grey-600: #a5a5a5;
  --cf-grey-500: #d8d8d8;
  --cf-grey-300: #e7e7e7;
  --cf-grey-150: #eeeeee;
  --cf-grey-100: #f7f7f7;
  --cf-white: #ffffff;

  --cf-primary: var(--cf-yellow);
  --cf-secondary: var(--cf-black);
  --cf-gradient-primary: linear-gradient(45deg, var(--cf-yellow) 0%, var(--cf-gradient-stop-1) 35%, var(--cf-gradient-stop-2) 70%, var(--cf-gradient-stop-3) 100%);
  --cf-gradient-primary-soft: linear-gradient(45deg, rgba(255,203,3,.92) 0%, rgba(254,195,8,.72) 45%, rgba(250,167,21,.42) 100%);
  --cf-gradient-dark: linear-gradient(135deg, #000000 0%, #141414 66%, rgba(255,203,3,.35) 100%);

  --cf-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --cf-font-heading: "adelle", Georgia, serif;
  --cf-fw-light: 300;
  --cf-fw-regular: 400;
  --cf-fw-semibold: 600;
  --cf-fw-bold: 700;

  --cf-text-xs: clamp(.74rem, .72rem + .1vw, .8rem);
  --cf-text-sm: clamp(.86rem, .82rem + .16vw, .95rem);
  --cf-text-md: clamp(1rem, .96rem + .2vw, 1.08rem);
  --cf-text-lg: clamp(1.12rem, 1.02rem + .45vw, 1.35rem);
  --cf-text-xl: clamp(1.45rem, 1.25rem + .9vw, 2rem);
  --cf-text-2xl: clamp(2rem, 1.55rem + 2vw, 3.25rem);
  --cf-text-3xl: clamp(2.8rem, 2rem + 3.4vw, 5.7rem);
  --cf-lh-tight: 1.05;
  --cf-lh-heading: 1.12;
  --cf-lh-body: 1.6;

  --cf-space-0: 0;
  --cf-space-1: .25rem;
  --cf-space-2: .5rem;
  --cf-space-3: .75rem;
  --cf-space-4: 1rem;
  --cf-space-5: 1.5rem;
  --cf-space-6: 2rem;
  --cf-space-7: 3rem;
  --cf-space-8: 4rem;
  --cf-space-9: 6rem;

  --cf-container: 1180px;
  --cf-container-wide: 1440px;
  --cf-container-reading: 760px;
  --cf-gutter: clamp(1rem, 3vw, 2rem);

  --cf-radius-sm: .45rem;
  --cf-radius-md: .9rem;
  --cf-radius-lg: 1.35rem;
  --cf-radius-xl: 2rem;
  --cf-radius-pill: 999px;

  --cf-shadow-sm: 0 8px 20px rgba(0,0,0,.08);
  --cf-shadow-md: 0 16px 38px rgba(0,0,0,.13);
  --cf-shadow-lg: 0 28px 70px rgba(0,0,0,.18);

  --cf-ease: cubic-bezier(.2,.8,.2,1);
  --cf-transition-fast: 150ms var(--cf-ease);
  --cf-transition: 260ms var(--cf-ease);
  --cf-transition-slow: 520ms var(--cf-ease);

  --cf-z-nav: 50;
  --cf-z-modal: 100;
}