:root {
  /* Sunrise Core */
  /*--sunrise-lavender: #C7B7FF;
  --sunrise-peach: #FFD6A5;
*/
  /* Soft Tints */
  /*--tint-peach: #FFF1E3;
  --tint-lavender: #F4EEFF;
  --tint-sky: #F2F8FF; 

*/

  /* Header */
  --color-header-bg: var(--color-white);
  --color-header-border: #EDEDED;
  --color-banner-bg: var(--color-mint-light); /*var(--tint-lavender);*/
  --color-banner-text: var(--color-plum); /*var(--neutral-charcoal);*/

  /* Accents */
  --color-accent1-300: rgba(200, 182, 226, 0.2);
  --color-accent1-400: #B878FF;
  --color-accent1-500: #c8b6e2;
  

  --color-plum: #4A2E57;
  --color-plum-deep: #2E1A36;
  --color-lavender: #8F66A3;
  --color-lavender-medium: #C9B2D9;
  --color-lavender-light: #F4EEFA;  
  --color-mint:#99E9E2;;
  --color-mint-light: #DFFBF8;
  --color-peach:#FFD6A5;
  --color-peach-light: #FFEBD2;
  --color-blue-light: #dbe9ff; /*#e7f1ff, #dbe9ff*/
  --color-orange-light: #ffdcd0;

/* New Neutrals */
  --color-neutral-white: #FFFFFF;
  --color-neutral-grey-950:#F9F9F9;
  --color-neutral-grey-900:#e2e2e2;
  --color-neutral-grey-850:#d4d4d4;
  --color-neutral-grey-555: #555;
  --color-neutral-grey-444: #444;
  --color-neutral-grey-333:#333;
  --color-neutral-charcoal: #1A1A1A;
  --color-neutral-black: #000000;

  
  --color-grey-950:#F9F9F9;
  --color-grey-900:#e2e2e2;
  --color-grey-850:#d4d4d4;
  --color-grey-888: #888;
  --color-grey-555: #555;
  --color-grey-444: #444;
  --color-grey-333:#333;

  --color-white: #FFFFFF;
  --color-charcoal: #1A1A1A;
  --color-black: #000000;

  /* only in sample pages */
  --neutral-white: #FFFFFF;
  --neutral-charcoal: #1A1A1A;

  /* Spacing scale */
  --space-100: 0.25rem;
  --space-200: 0.5rem;
  --space-300: 0.75rem;
  --space-400: 1rem;
  --space-500: 1.5rem;
  --space-600: 2rem;
  --space-700: 3rem;
  --space-800: 4rem;
  --space-900: 6rem;
  --space-1000: 8rem;

  /* Radius */
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-large: 16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-soft: 0 4px 12px rgba(0,0,0,0.08);
  --shadow-medium: 0 6px 20px rgba(0,0,0,0.12);
  --shadow-large: 0 10px 25px rgba(0,0,0,0.20);

  /* Typography scale */
  --fs-100: 0.75rem;
  --fs-200: 0.875rem;
  --fs-300: 1rem;
  --fs-400: 1.125rem;
  --fs-500: 1.25rem;
  --fs-600: 1.5rem;
  --fs-700: 2rem;
  --fs-800: 2.5rem;
  --fs-hero: 3.2rem;

  /* max-width for pages that have a lot of text 
  and want to be displayed in less space */
  --max-width-content: 800px;


}