/* CSS VARIABLES */

:root {

  /* Fonts */
  --font-sans: "Cera Pro", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-serif: "Vollkorn", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

  /* Colors */
  --color-white-05: hsla(0, 0%, 100%, .05);/* White 5 */
  --color-white-10: hsla(0, 0%, 100%, .1); /* White 10 */
  --color-white-15: hsla(0, 0%, 100%, .15);/* White 15 */
  --color-white-20: hsla(0, 0%, 100%, .2); /* White 20 */
  --color-white-50: hsla(0, 0%, 100%, .5); /* White 50 */
  --color-white-70: hsla(0, 0%, 100%, .7); /* White 70 */
  --color-white-90: hsla(0, 0%, 100%, .9); /* White 90 */
  --color-white-100: hsla(0, 0%, 100%, 1); /* White 100 */
  --color-white: var(--color-white-100); /* White */
  --color-grey-50:  hsla(0, 0%, 95%, 1); /* Light Grey */
  --color-grey-200: hsla(0, 0%, 89%, 1); /* Grey - 01 */
  --color-grey-300: hsla(0, 0%, 74%, 1);
  --color-grey-400: hsla(180, 2%, 62%, 1); /* Grey - 02 */
  --color-grey-500: hsla(180, 1%, 51%, 1);
  --color-grey-700: hsla(180, 1%, 37%, 1); /* Grey - 03 */
  --color-grey-800: hsla(180, 2%, 22%, 1); /* Grey - 04 */
  --color-black-10: hsla(0, 0%, 10%, .1); /* Black 10 */
  --color-black-20: hsla(0, 0%, 10%, .2); /* Black 20 */
  --color-black-50: hsla(0, 0%, 10%, .5); /* Black 50 */
  --color-black-70: hsla(0, 0%, 10%, .7); /* Black 70 */
  --color-black-100: hsla(0, 0%, 10%, 1); /* Black 100 */
  --color-black: var(--color-black-100); /* Black */
  --color-primary-h: 177;
  --color-primary-s: 100%;
  --color-primary-l: 29%;
  --color-primary-10: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .1); /* Focus 10% */
  --color-primary-20: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .2); /* Focus 20% */
  --color-primary-40: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .4); /* Focus 40% */
  --color-primary-50: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .5); /* Focus 50% */
  --color-primary-70: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), .7); /* Focus 70% */
  --color-primary-100: hsla(var(--color-primary-h), var(--color-primary-s), var(--color-primary-l), 1); /* Focus 100% */
  --color-primary: var(--color-primary-100); /* Focus */
  --color-primary-hover: hsla(var(--color-primary-h), var(--color-primary-s), calc(var(--color-primary-l) - 7%), 1); /* Focus - Accent */
  --color-brand-100: hsla(347, 84%, 45%, 1); /* Brand 100% */
  --color-brand: var(--color-brand-100); /* Brand */
  --color-dtl-15: hsla(127, 47%, 58%, 0.15);
  --color-dtl-100: hsla(157, 100%, 29%, 1);
  --color-dtl: var(--color-dtl-100);
  --color-background: var(--color-white);
  --color-text: var(--color-black);
  --color-focus-ring: var(--color-primary-50);
  --color-disabled: var(--color-grey-400);

  /* Space scale */
  --space-1: .275em; /* typographic space */
  --space-4: .25rem;
  --space-8: .5rem;
  --space-12: .75rem;
  --space-16: 1rem;
  --space-24: 1.5rem;
  --space-32: 2rem;
  --space-40: 2.5rem;
  --space-48: 3rem;
  --space-64: 4rem;

  /* Type scale */
  --text-xs: .75rem;  /* 12px */
  --text-sm: .875rem; /* 14px */
  --text-md: 1rem;    /* 16px */
  --text-lg: 1.5rem;  /* 24px */
  --text-xl: 2rem;    /* 32px */

  /* Leading */
  --leading-none: 1;
  --leading-sm: 1.25;
  --leading-md: 1.4285714286; /* 20/14 */
  --leading-lg: 1.5; /* 24/16 */

  /* Tracking */
  --tracking-wide: 0.01em;
  --tracking-wider: 0.02em;

  /* Layout */
  --gutter: 32px;
  --header-height: 3.5rem; /* 56px */
  --sidebar-width: 22.25rem; /* 356px */
  --flow-space: 1rem;
  --auto-grid-placement: auto-fill;
  --gap: var(--space-16);
  --wrapper-max-width: 52.875rem; /* 846px */
  --p-scrollbar-width: var(--gutter);

  /* Borders */
  --rounded-xs: 1px;
  --rounded-sm: 4px;
  --rounded-md: 8px;
  --rounded-lg: 12px;
  --rounded-xl: 16px;
  --rounded-2xl: 20px;
  --rounded-full: 9999px;
  --border-width: 1px;
  --border-color: var(--color-black);
  --border: var(--border-width) solid var(--border-color);

  /* Shadows */
  --shadow: 0px 4px 20px 0px var(--color-black-10);  
  
  /* Prose */
  --max-width: 64ch;
  
  /* Transitions */
  --timing: 200ms;
  --easing: ease;

}
