/* Design System.pdf: fundamentos e tokens das páginas 1–3. */
:root {
  --neutral-0: #ffffff;
  --neutral-50: #f2f2f2;
  --neutral-100: #f3f6f6;
  --neutral-200: #ececec;
  --neutral-300: #dadada;
  --neutral-500: #a3a3a3;
  --neutral-900: #333333;
  --neutral-1000: #000000;
  --teal-100: #d2e1e1;
  --teal-200: #6e9f9d;
  --teal-300: #4d8784;
  --teal-400: #33cc99;
  --teal-600: #006560;
  --teal-700: #014642;
  --blue-50: #dee5ea;
  --blue-100: #e2e5e9;
  --blue-600: #6a7d8f;
  --blue-699: #5185b2;
  --blue-700: #3e78aa;
  --blue-799: #4c6378;
  --blue-800: #385269;
  --blue-900: #00375e;
  --green-5: #e6f5f0;
  --green-10: #d9e1db;
  --green-100: #55965e;
  --green-200: #72be72;
  --green-300: #2eb42e;
  --green-400: #416b49;
  --green-500: #286852;
  --yellow-100: #e8e4d4;
  --yellow-300: #fdc700;
  --red-100: #fde6e7;
  --red-300: #df3434;
  --red-600: #e83333;

  --radius-none: 0px;
  --radius-2xsmall: 2px;
  --radius-xsmall: 5px;
  --radius-small: 8px;
  --radius-medium: 10px;
  --radius-large: 12px;
  --radius-xlarge: 15px;
  --radius-full: 999px;
  --border-none: 0px;
  --border-small: 1px;
  --border-medium: 1.5px;
  --border-large: 2px;
  --shadow-none: none;
  --shadow-small: 1px 1px 3px rgb(0 0 0 / 15%);
  --shadow-medium: 2px 2px 5px rgb(0 0 0 / 25%);

  --font-primary: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-secondary: "Roboto Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-12: 12px;
  --font-size-15: 15px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-21: 21px;
  --font-size-24: 24px;
  --font-size-27: 27px;
  --font-size-36: 36px;
  --font-size-40: 40px;
  --font-weight-regular: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --space-none: 0px;
  --space-3xsmall: 2px;
  --space-2xsmall: 4px;
  --space-xsmall: 5px;
  --space-small: 8px;
  --space-medium: 12px;
  --space-large: 14px;
  --space-xlarge: 16px;
  --space-2xlarge: 20px;
  --space-3xlarge: 30px;
  --space-4xlarge: 50px;

  --icon-4xsmall: 16px;
  --icon-3xsmall: 20px;
  --icon-2xsmall: 24px;
  --icon-xsmall: 28px;
  --icon-small: 32px;
  --icon-medium: 40px;
  --icon-large: 48px;
  --icon-xlarge: 56px;
  --icon-2xlarge: 64px;
  --icon-3xlarge: 72px;
  --icon-4xlarge: 80px;
  --icon-5xlarge: 96px;
  --icon-6xlarge: 192px;

  --control-primary-height: 52px;
  --control-secondary-height: 48px;
  --color-hover: var(--blue-700);
  --color-selected: var(--teal-700);
  --color-success: var(--green-500);
  --color-error: var(--red-600);
  --color-disabled: var(--neutral-500);
  --surface-disabled: var(--neutral-300);

  --brand-green: var(--green-400);
  --brand-green-light: var(--green-100);
  --brand-blue: var(--blue-800);
  --brand-blue-hover: var(--color-hover);
  --brand-teal: var(--teal-300);
  --brand-teal-dark: var(--teal-700);
  --interactive: var(--teal-600);
  --gray-light: var(--neutral-200);
  --gray: var(--neutral-500);
  --ink: var(--neutral-900);
  --muted: var(--blue-799);
  --bg: var(--neutral-100);
  --paper: var(--neutral-0);
  --line: var(--neutral-200);
  --radius: var(--radius-xlarge);
}