@import url(https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0);

.flex-fill { flex: 1 1 auto }
.flex { display: flex }
.flex-row { display: flex; flex-direction: row }
.flex-row.top { align-items: flex-start }
.flex-row.middle { align-items: center }
.flex-row.bottom { align-items: flex-end }
.flex-row.left { justify-content: flex-start }
.flex-row.center { justify-content: center }
.flex-row.right { justify-content: flex-end }
.flex-col { display: flex; flex-direction: column }
.flex-col.top { justify-content: flex-start }
.flex-col.middle { justify-content: center }
.flex-col.bottom { justify-content: flex-end }
.flex-col.left { align-items: flex-start }
.flex-col.center { align-items: center }
.flex-col.right { align-items: flex-end }
:not(:defined) { display:none }
[hidden] { display: none !important }

html, body, h1, h2, h3, h4, h5, h6, p { 
  margin: 0;
  padding: 0;
}
html, body  { 
  font-family: Arial, sans-serif;
  background-color: var(--color-neutral-00);
  color: var(--color-neutral-80);
  transition: var(--background-transition);
}
h1, h2, h3, h4, h5, h6 { 
  font-family: var(--title-font);
}
div {
  box-sizing: border-box;
}
input, textarea, select { 
  border: 1px solid var(--color-neutral-70);
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--size-md);
  color: var(--color-neutral-30);
  background: var(--color-neutral-100);
}

/* fix */
mo-field { 
  flex: 1 1;
  padding: 0;
}

/* custom config */
:root { 
  --content-wrapper-width: 1400px;
  --title-font: 'M PLUS Rounded 1c', sans-serif;
  --line-height-mod: 1.4;
  --background-transition: background-color 1s ease-out;
  --page-background: #fcfcfc;
}

/* design tokens */
:root { 

  /* screen -- do not change breakpoints */
  --breakpoint-xs: 576px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 992px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1400px;

  /* used for font-size, line-height */
  --size-4xs: 4px;
  --size-3xs: 8px;
  --size-2xs: 10px;
  --size-xs: 12px;
  --size-sm: 14px;
  --size-md: 16px;
  --size-lg: 20px;
  --size-xl: 24px;
  --size-2xl: 32px;
  --size-3xl: 48px;
  --size-4xl: 64px;

  /* used for padding, margin, gap */
  --space-4xs: 1px;
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* used for section width, height */
  --panel-4xs: 60px;
  --panel-3xs: 80px;
  --panel-2xs: 100px;
  --panel-xs: 120px;
  --panel-sm: 180px;
  --panel-md: 200px;
  --panel-lg: 280px;
  --panel-xl: 400px;
  --panel-2xl: 600px;
  --panel-3xl: 800px;
  --panel-4xl: 1000px;
  --panel-5xl: 1400px;
  --panel-6xl: 1800px;

  /* outlines */
  --border-width-xs: 1px;
  --border-width-sm: 2px;
  --border-width-md: 3px;
  --border-width-lg: 4px;
  --border-width-xl: 6px;
  --border-radius-xs: 2px;
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --shadow-color: rgba(0, 0, 0, 0.5);
  --shadow-xs: var(--shadow-color) 0px 0px 1px 0px;
  --shadow-sm: var(--shadow-color) 1px 1px 2px 0px;
  --shadow-md: var(--shadow-color) 2px 2px 4px 0px;

}

/* palette */
:root {

  --color-neutral-100: #ffffff;
  --color-neutral-90: #eeeeee;
  --color-neutral-80: #d0d0d0;
  --color-neutral-70: #b8b8b8;
  --color-neutral-60: #a0a0a0;
  --color-neutral-50: #888888;
  --color-neutral-40: #6d6d6d;
  --color-neutral-30: #383838;
  --color-neutral-20: #282828;
  --color-neutral-10: #1b1b1b;
  --color-neutral-00: #000000;

  --color-primary-100: #e8eff4;
  --color-primary-90: #d9e3ea;
  --color-primary-80: #8caabd;
  --color-primary-70: #7194a9;
  --color-primary-60: #4b6e85;
  --color-primary-50: #34586e;
  --color-primary-40: #1f4055;
  --color-primary-30: #0f2c3e;
  --color-primary-20: #061c2b;
  --color-primary-10: #01111b;
  --color-primary-00: #000000;

  --color-secondary-100: #f8ebe2;
  --color-secondary-90: #f4d0ba;
  --color-secondary-80: #f4b482;
  --color-secondary-70: #f79951;
  --color-secondary-60: #ef8433;
  --color-secondary-50: #e5711a;
  --color-secondary-40: #af520c;
  --color-secondary-30: #743504;
  --color-secondary-20: #512402;
  --color-secondary-10: #2e1502;
  --color-secondary-00: #000000;

  --color-accent-100: #fbeeff;
  --color-accent-90: #e0b9ed;
  --color-accent-80: #bc84cf;
  --color-accent-70: #a062b5;
  --color-accent-60: #7f3f94;
  --color-accent-50: #642479;
  --color-accent-40: #531767;
  --color-accent-30: #410e53;
  --color-accent-20: #350844;
  --color-accent-10: #290536;
  --color-accent-00: #120018;
  
  --color-info-100: #f0f8fa;
  --color-info-90: #d4e6ec;
  --color-info-80: #c8dee5;
  --color-info-70: #9fd2e1;
  --color-info-60: #5cb7d3;
  --color-info-50: #1587aa;
  --color-info-40: #0c6a87;
  --color-info-30: #05566e;
  --color-info-20: #023d4f;
  --color-info-10: #001d25;
  --color-info-00: #000000;

  --color-warning-100: #fcfcf1;
  --color-warning-90: #e9e9cb;
  --color-warning-80: #d2d19d;
  --color-warning-70: #b8b768;
  --color-warning-60: #adac42;
  --color-warning-50: #9d9b26;
  --color-warning-40: #7f7d18;
  --color-warning-30: #69680c;
  --color-warning-20: #484704;
  --color-warning-10: #343301;
  --color-warning-00: #121200;

  --color-success-100: #ebf8ec;
  --color-success-90: #c9e4cb;
  --color-success-80: #aed2b0;
  --color-success-70: #9ac29d;
  --color-success-60: #76a979;
  --color-success-50: #5f9563;
  --color-success-40: #427a46;
  --color-success-30: #28672c;
  --color-success-20: #104e14;
  --color-success-10: #083b0b;
  --color-success-00: #001201;

  --color-error-100: #fae9eb;
  --color-error-90: #d8b5b7;
  --color-error-80: #a96a6e;
  --color-error-70: #85494d;
  --color-error-60: #833339;
  --color-error-50: #732025;
  --color-error-40: #5b1418;
  --color-error-30: #4a0c10;
  --color-error-20: #3c070a;
  --color-error-10: #240204;
  --color-error-00: #0e0001;

}