@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* Core colors. */
  --primary-purple-color: #541fc4;
  --secondary-purple-color: #6629dc;
  --text-color: #2d2d30;
  --text-color-white: #fff;
  --text-secondary-color: #878787;
  --background-white-color: #f8f8f8;
  --hover-button-color: #dd1367;
  --span-orange-color: #ee7435;
  --gradient-light-purple: #a666fa;
  --gradient-dark-purple: #7731f3;

  /* Shadows. */
  --color-shadow-10: rgba(0, 0, 0, 0.1);
  --color-shadow-15: rgba(0, 0, 0, 0.15);
  --color-shadow-18: rgba(0, 0, 0, 0.18);
  --color-shadow-20: rgba(0, 0, 0, 0.2);
  --color-shadow-30: rgba(0, 0, 0, 0.3);
  --color-shadow-35: rgba(0, 0, 0, 0.35);
  --color-shadow-50: rgba(0, 0, 0, 0.5);
  --color-shadow-text: rgba(0, 0, 0, 0.5);

  /* UI surfaces and states. */
  --surface-menu-drawer: #e7d8d8;
  --surface-menu-item-hover: #c2cfcf;
  --surface-highlight-lilac: #f7f3ff;
  --surface-lavender: #eee5ff;
  --surface-neutral-200: #e0e0e0;
  --surface-neutral-300: #d5d5d5;
  --surface-map-placeholder: #d3d3d3;
  --surface-toast: #323232;
  --surface-nav-hover-overlay: #5a4cc7;

  /* Additional text colors. */
  --text-color-heading: #333333;
  --text-color-strong: #1e1e1e;
  --text-color-caption: #696b6b;
  --text-color-placeholder: #aaaaaa;
  --text-color-pure-black: #000000;

  /* Borders. */
  --border-color-muted: #939595;
  --border-color-neutral: #dddddd;

  /* Map and pin colors. */
  --map-pin-primary: #8e6de9;
  --map-pin-hover: #6b4edb;
  --map-pin-disabled: #bba4f0;

  /* Toast and feedback colors. */
  --toast-success-bg: #22c55e;
  --toast-error-bg: #ef4444;
  --toast-info-bg: #3b82f6;
  --toast-warning-bg: #f59e0b;

  /* Guardian page accents. */
  --guardian-accent: #e91e63;
  --guardian-accent-dark: #c2185b;
  --guardian-danger: #f44336;
  --guardian-danger-dark: #d32f2f;
  --color-gold: #ffd700;

  /* Fixed font sizes. */
  --font-size-10: 0.625rem;
  --font-size-12: 0.75rem;
  --font-size-12-336: 0.771rem;
  --font-size-13: 0.8125rem;
  --font-size-14: 0.875rem;
  --font-size-15: 0.9375rem;
  --font-size-16: 1rem;
  --font-size-17: 1.0625rem;
  --font-size-17-2: 1.074rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-24: 1.5rem;
  --font-size-28: 1.75rem;
  --font-size-30: 1.875rem;
  /* Base do html (reset) */
  --font-size-html-root: 100%;

  /* Font family and weights. */
  --font-family-base: "Inter", sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;

  /* Mobile typography tokens. */
  --font-size-text: 1rem; /* 16px */
  --font-size-button: 1rem; /* 16px */
  --font-size-button-highlight: 1.0625rem; /* 17px */
  --font-size-button-main-menu: 1.25rem; /* 20px */
  --font-size-title: 1.25rem; /* 20px */
  --font-size-section-title: 1.125rem; /* 18px */
  --font-size-section-subtitle: 1rem; /* 16px */
  --font-size-exit-button: 0.713rem; /* 11.4px */
  --font-size-exit-button-desktop: 1rem; /* 16px */
  --font-size-form-subtitle: 0.875rem; /* 14px */
}

/* Tokens tipograficos para tablet e desktop. */
@media (min-width: 768px) {
  :root {
    --font-size-text: 1.125rem; /* 18px */
    --font-size-section-title: 2.625rem; /* 42px */
    --font-size-section-subtitle: 1.9563rem; /* 31.3px */
    --font-size-button: 1.5rem; /* 24px */
    --font-size-button-highlight: 2.6094rem; /* 41.75px */
    --font-size-title: 1.875rem; /* 30px */
    --font-size-form-subtitle: 1rem; /* 16px */
  }
}