:root {
  /* =========================================================
   * PRIMITIVOS
   * ========================================================= */

  /* B&W */
  --full-black: #000000;
  --full-white: #FFFFFF;

  /* Primary */
  --color-primary-50: #E9EEF5;
  --color-primary-500: #1E4679;
  --color-primary-600: #1A3F6D;
  --color-primary-700: #16365E;

  /* Secondary */
  --color-secondary-50: #EAF6FB;
  --color-secondary-300: #6FC0DF;
  --color-secondary-500: #2BA4D3;
  --color-secondary-600: #2493BD;
  --color-secondary-700: #1E7FA6;

  /* Neutral */
  --color-neutral-50: #F7F8FA;
  --color-neutral-100: #EEF1F5;
  --color-neutral-200: #DDE3EA;
  --color-neutral-300: #C5CED8;
  --color-neutral-400: #A8B3C1;
  --color-neutral-500: #6B7785;
  --color-neutral-600: #4B5563;
  --color-neutral-700: #374151;
  --color-neutral-900: #111827;

  /* Success */
  --color-green-50: #ECFDF5;
  --color-green-600: #059669;
  --color-green-700: #047857;

  /* Error */
  --color-red-50: #FDECEC;
  --color-red-600: #DC2626;
  --color-red-700: #B91C1C;

  /* Warning */
  --color-yellow-50: #FFFBE6;
  --color-yellow-600: #D97706;
  --color-yellow-700: #B45309;


  /* =========================================================
   * SEMÂNTICOS — TEXT
   * ========================================================= */

  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-600);
  --color-text-inverse: var(--color-neutral-50);
  --color-text-disabled: var(--color-neutral-500);

  --color-text-link: var(--color-secondary-600);
  --color-text-link-inverse: var(--color-secondary-300);
  --color-text-link-hover: var(--color-secondary-700);


  /* =========================================================
   * SEMÂNTICOS — BACKGROUND
   * ========================================================= */

  --color-bg-default: var(--color-neutral-50);
  --color-bg-alt: var(--color-neutral-100);
  --color-bg-subtle: var(--color-primary-50);
  --color-bg-inverse: var(--color-neutral-900);
  --color-bg-disabled: var(--color-neutral-200);


  /* =========================================================
   * SEMÂNTICOS — BORDER
   * ========================================================= */

  --color-border-default: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-400);
  --color-border-disabled: var(--color-neutral-300);
  --color-border-inverse: var(--color-neutral-700);


  /* =========================================================
   * SEMÂNTICOS — ICONS
   * ========================================================= */

  --color-icon-default: var(--color-neutral-900);
  --color-icon-muted: var(--color-neutral-600);
  --color-icon-inverse: var(--color-neutral-50);
  --color-icon-disabled: var(--color-neutral-500);

  --color-icon-primary: var(--color-primary-500);
  --color-icon-secondary: var(--color-secondary-500);

  --color-icon-success: var(--color-green-700);
  --color-icon-error: var(--color-red-700);
  --color-icon-warning: var(--color-yellow-700);


  /* =========================================================
   * SEMÂNTICOS — STATES
   * ========================================================= */

  --color-success: var(--color-green-600);
  --color-success-bg: var(--color-green-50);
  --color-success-text: var(--color-green-700);

  --color-error: var(--color-red-600);
  --color-error-bg: var(--color-red-50);
  --color-error-text: var(--color-red-700);

  --color-warning: var(--color-yellow-600);
  --color-warning-bg: var(--color-yellow-50);
  --color-warning-text: var(--color-yellow-700);

  --color-info: var(--color-secondary-600);
  --color-info-bg: var(--color-secondary-50);
  --color-info-text: var(--color-secondary-700);


  /* =========================================================
   * SEMÂNTICOS — BRAND
   * ========================================================= */

  --color-primary: var(--color-primary-500);
  --color-primary-hover: var(--color-primary-600);
  --color-primary-active: var(--color-primary-700);

  --color-secondary: var(--color-secondary-500);


  /* =========================================================
   * SEMÂNTICOS — BUTTONS
   * ========================================================= */

  --color-button-primary-bg: var(--color-primary-500);
  --color-button-primary-bg-hover: var(--color-primary-600);
  --color-button-primary-bg-active: var(--color-primary-700);
  --color-button-primary-bg-disabled: var(--color-neutral-200);
  --color-button-primary-text: var(--color-neutral-50);
  --color-button-primary-text-disabled: var(--color-neutral-500);

  --color-button-secondary-bg: var(--color-secondary-500);
  --color-button-secondary-bg-hover: var(--color-secondary-600);
  --color-button-secondary-bg-active: var(--color-secondary-700);
  --color-button-secondary-bg-disabled: var(--color-neutral-200);
  --color-button-secondary-text: var(--color-neutral-50);
  --color-button-secondary-text-disabled: var(--color-neutral-500);

  --color-button-ghost-bg: transparent;
  --color-button-ghost-bg-hover: var(--color-neutral-100);
  --color-button-ghost-bg-active: var(--color-neutral-200);
  --color-button-ghost-bg-disabled: transparent;
  --color-button-ghost-text: var(--color-primary-500);
  --color-button-ghost-text-hover: var(--color-primary-600);
  --color-button-ghost-text-active: var(--color-primary-700);
  --color-button-ghost-text-disabled: var(--color-neutral-500);


  /* =========================================================
   * SEMÂNTICOS — EDITORIAS
   * ========================================================= */

  --color-editoria-institucional: #006197;
  --color-editoria-associados: #008041;
  --color-editoria-cursos: #EC1C24;
  --color-editoria-energia: #F48120;
  --color-editoria-40anos: #AE7B2B;
}


:root {
  /* =========================================================
   * FONT FAMILY
   * ========================================================= */

  --font-family-base: 'Inter', sans-serif;

  /* =========================================================
   * FONT WEIGHTS
   * ========================================================= */

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* =========================================================
   * HEADING
   * ========================================================= */

  --font-size-h1: 48px;
  --line-height-h1: 56px;

  --font-size-h2: 40px;
  --line-height-h2: 48px;

  --font-size-h3: 32px;
  --line-height-h3: 40px;

  --font-size-h4: 28px;
  --line-height-h4: 36px;

  --font-size-h5: 24px;
  --line-height-h5: 32px;

  --font-size-h6: 20px;
  --line-height-h6: 28px;

  --letter-spacing-heading: -1px;

  /* =========================================================
   * BODY
   * ========================================================= */

  --font-size-body-large: 18px;
  --line-height-body-large: 28px;

  --font-size-body: 16px;
  --line-height-body: 24px;

  --font-size-body-small: 14px;
  --line-height-body-small: 20px;

  --font-size-small: 12px;
  --line-height-small: 16px;

  /* =========================================================
   * UI TEXT
   * ========================================================= */

  --font-size-label: 14px;
  --line-height-label: 20px;

  --font-size-button: 16px;
  --line-height-button: 24px;

  --font-size-link: 16px;
  --line-height-link: 24px;
}


@media (max-width: 1024px) {
  :root {
    --font-size-h1: 40px;
    --line-height-h1: 48px;

    --font-size-h2: 32px;
    --line-height-h2: 40px;

    --font-size-h3: 28px;
    --line-height-h3: 36px;

    --font-size-h4: 24px;
    --line-height-h4: 32px;

    --font-size-h5: 22px;
    --line-height-h5: 30px;

    --font-size-h6: 18px;
    --line-height-h6: 26px;
  }
}

@media (max-width: 768px) {
  :root {
    --font-size-h1: 32px;
    --line-height-h1: 40px;

    --font-size-h2: 28px;
    --line-height-h2: 36px;

    --font-size-h3: 24px;
    --line-height-h3: 32px;

    --font-size-h4: 22px;
    --line-height-h4: 30px;

    --font-size-h5: 20px;
    --line-height-h5: 28px;

    --font-size-h6: 18px;
    --line-height-h6: 26px;
  }
}


:root {
  /* =========================================================
   * SPACING
   * ========================================================= */

  --spacing-null: 0px;
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-s: 8px;
  --spacing-m: 12px;
  --spacing-l: 16px;
  --spacing-xl: 24px;
  --spacing-xxl: 32px;
  --spacing-xxxl: 40px;
  --spacing-huge: 60px;
  --spacing-max: 80px;
}



:root {
  /* =========================================================
   * CORNER (BORDER RADIUS)
   * ========================================================= */

  --corner-none: 0px;
  --corner-xs: 2px;
  --corner-s: 4px;
  --corner-md: 8px;
  --corner-l: 16px;
  --corner-xl: 32px;
}