@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;700&display=swap");

:root {
  --cs-green: #9fcc3f;
  --cs-teal: #67c8ca;
  --cs-red: #f05759;
  --cs-yellow: #fad358;
  --cs-purple-deep: #482d8b;
  --cs-purple: #7c658f;
  --cs-purple-light: #e6e0ea;
  --cs-orange: #f68e59;
  --cs-white: #ffffff;
  --cs-black: #000000;

  --cs-level-a: var(--cs-green);
  --cs-level-b: var(--cs-teal);
  --cs-level-c: var(--cs-red);
  --cs-level-d: var(--cs-yellow);

  --cs-green-soft: #eef6dc;
  --cs-teal-soft: #e1f4f4;
  --cs-red-soft: #fde3e3;
  --cs-yellow-soft: #fef3d2;
  --cs-purple-deep-strong: #3a2370;
  --cs-purple-deep-soft: #5a3fa6;
  --cs-purple-strong: #6a5680;

  --cs-ink: #23202e;
  --cs-ink-soft: #4a4458;
  --cs-grey-700: #5b5566;
  --cs-grey-500: #8b8597;
  --cs-grey-300: #d8d4de;
  --cs-grey-200: #e8e5ee;
  --cs-grey-100: #f4f2f8;

  --color-bg: var(--cs-white);
  --color-bg-alt: var(--cs-grey-100);
  --color-surface: var(--cs-white);
  --color-surface-raised: var(--cs-white);

  --color-text: var(--cs-ink);
  --color-text-muted: var(--cs-grey-700);
  --color-text-inverse: var(--cs-white);
  --color-heading: var(--cs-purple-deep);

  --color-primary: var(--cs-purple-deep);
  --color-primary-strong: var(--cs-purple-deep-strong);
  --color-primary-soft: var(--cs-purple-deep-soft);
  --color-on-primary: var(--cs-white);

  --color-accent: var(--cs-purple);
  --color-accent-strong: var(--cs-purple-strong);
  --color-on-accent: var(--cs-white);

  --color-cart: var(--cs-purple);
  --color-on-cart: var(--cs-white);

  --color-on-level: var(--cs-ink);

  --color-link: var(--cs-purple-deep);
  --color-link-hover: var(--cs-purple);
  --color-link-visited: var(--cs-purple-deep-strong);

  --color-border: var(--cs-grey-300);
  --color-border-strong: var(--cs-purple);
  --color-focus-ring: #6a4bc0;
  --color-selection-bg: var(--cs-purple-light);
  --color-selection-text: var(--cs-purple-deep);

  --font-sans: "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-icon: "FontAwesome";

  --weight-light: 300;
  --weight-regular: 400;
  --weight-semibold: 600;
  --weight-bold: 700;

  --text-xs: 0.875rem;
  --text-sm: 1rem;
  --text-base: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: clamp(1.375rem, 1.24rem + 0.6vw, 1.625rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-3xl: clamp(2rem, 1.62rem + 1.7vw, 2.75rem);
  --text-4xl: clamp(2.4rem, 1.9rem + 2.3vw, 3.5rem);

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-loose: 1.75;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-section: clamp(3rem, 2rem + 5vw, 6rem);

  --radius-sm: 5px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --radius-round: 50%;

  --shadow-sm: 0 1px 2px rgba(35, 32, 46, 0.08);
  --shadow-md: 0 4px 14px rgba(35, 32, 46, 0.1);
  --shadow-lg: 0 14px 38px rgba(35, 32, 46, 0.14);
  --shadow-focus: 0 0 0 3px rgba(106, 75, 192, 0.45);

  --container-max: 75rem;
  --container-wide: 82rem;
  --container-narrow: 44rem;
  --container-pad: clamp(1rem, 0.5rem + 2.5vw, 2rem);

  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 320ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --z-base: 1;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}