:root
{
  /* Global */
  --backdrop-blur-sm: blur(2px);
  --backdrop-blur-lg: blur(15px);
  --bg-glass-overlay: rgba(255, 255, 255, 0.35);
  --container-max-width: 1200px;
  --barlow: "Barlow Condensed", sans-serif;
  --lusitana: "Lusitana", "EB Garamond", Garamond, serif;
  --pattern-azulejo: url('../images/azulejo.svg');
  --radius-xl: 20px;
  --shadow-elevation-sm: 0px 4px 4px rgba(0, 0, 0, 0.25);
  --shadow-elevation-lg: 0px 0px 10px 10px rgba(0, 0, 0, 0.45);

  /* -------------------------------------------------------------------------- */
  /* 🇬🇧   Navbar
  /* 🇧🇷🇵🇹 Barra de navegação
  /* -------------------------------------------------------------------------- */
  --navbar-height-desktop: 100px;
  --navbar-height-scrolled: 60px;
  --navbar-height-mobile: 70px;
  --navbar-padding-x: 5%;
  --transition-speed: 0.4s;
  --transition-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* -------------------------------------------------------------------------- */
  /* 🇬🇧   Section
  /* 🇧🇷🇵🇹 Seção
  /* -------------------------------------------------------------------------- */
  
  /* Global */
  --section-overlay: linear-gradient(180deg, #000000 0%, #000000 100%);
  --section-padding: 5rem 2rem;

  /* Hero section */
  --hero-bg-image: url("../images/portugal-ponte-25-de-abril.jpg");
  --hero-min-height: 50vh;

  /* -------------------------------------------------------------------------- */
  /* 🇬🇧   Light mode
  /* 🇧🇷🇵🇹 Modo claro
  /* -------------------------------------------------------------------------- */
  
  /* 🇬🇧   Navbar             */
  /* 🇧🇷🇵🇹 Barra de navegação */
  --navbar-drawer: var(--palette-white);
  --navbar-surface-scrolled: rgba(255, 255, 255, 0.95);
  --navbar-surface: var(--palette-white);

  --navbar-menu-items-anchor-color_01: var(--palette-black-03);
  --navbar-menu-items-anchor-color_02: var(--palette-red-03);
  --navbar-hamburger-icon-bar-color: var(--palette-black-03);
  
  --navbar-mode-toggle-color: var(--palette-black-10);
  --navbar-mobile-subtle-border-color: var(--palette-black-10);

  /* 🇬🇧   All the sections in a global way */
  /* 🇧🇷🇵🇹 Todas as seções de forma global */
  --all-sections: var(--palette-white);

  /* 🇬🇧   Services section  */
  /* 🇧🇷🇵🇹 Seção de serviços */
  --pattern-azulejo-azul: url('../images/azulejo-azul.svg');

  /* 🇬🇧 Blog archive component variables
   * 🇧🇷 Variáveis do componente de arquivo do blog
   * 🇵🇹 Variáveis do componente de ficheiro do blogue
   */
  --blog-header-bg: var(--palette-white);
  --blog-header-border: var(--palette-black-10);
  --blog-title-color: var(--palette-black-01);
  --blog-description-color: var(--palette-black-05);
  
  --blog-section-bg: var(--palette-white);
  --blog-card-bg: var(--palette-white);
  --blog-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --blog-card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
  
  --blog-post-title-color: var(--palette-black-01);
  --blog-post-title-hover: var(--palette-red-02);
  --blog-post-meta-color: var(--palette-black-06);
  --blog-post-text-color: var(--palette-black-04);
  --blog-post-overlay: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 100%);
  
  --blog-readmore-color: var(--palette-red-02);
  
  --blog-pagination-bg: var(--palette-white);
  --blog-pagination-border: var(--palette-black-10);
  --blog-pagination-text: var(--palette-black-03);
  --blog-pagination-active-bg: var(--palette-red-02);
  --blog-pagination-hover-bg: var(--palette-black-10);
  --blog-pagination-hover-border: var(--palette-red-02);
  --blog-pagination-hover-text: var(--palette-red-02);
  
  --blog-grid-gap: 40px;
  --blog-card-radius: 12px;
  --blog-image-height: 240px;
}

/* -------------------------------------------------------------------------- */
/* 🇬🇧   Dark mode
/* 🇧🇷🇵🇹 Modo escuro
/* -------------------------------------------------------------------------- */
body.theme-dark
{
  --bg-glass-overlay: rgba(0, 0, 0, 0.65);

  /* 🇬🇧   Navbar             */
  /* 🇧🇷🇵🇹 Barra de navegação */
  --navbar-drawer: var(--palette-black-02);
  --navbar-surface: var(--palette-green-01);
  --navbar-surface-scrolled: rgba(26, 26, 26, 0.95);

  --navbar-menu-items-anchor-color_01: var(--palette-white);
  --navbar-menu-items-anchor-color_02: var(--palette-red-03);
  --navbar-hamburger-icon-bar-color: var(--palette-black-10);
  
  --navbar-mode-toggle-color: var(--palette-black-04);
  --navbar-mobile-subtle-border-color: var(--palette-black-04);

  /* 🇬🇧   All the sections in a global way */
  /* 🇧🇷🇵🇹 Todas as seções de forma global */
  --all-sections: var(--palette-black-01);

  /* 🇬🇧   Services section  */
  /* 🇧🇷🇵🇹 Seção de serviços */
  --pattern-azulejo-azul: url('../images/azulejo.svg');

  /* 🇬🇧 Blog archive component variables
   * 🇧🇷 Variáveis do componente de arquivo do blog
   * 🇵🇹 Variáveis do componente de ficheiro do blogue
   */
  --blog-header-bg: var(--palette-black-01);
  --blog-header-border: var(--palette-black-04);
  --blog-title-color: var(--palette-white);
  --blog-description-color: var(--palette-black-07);
  
  --blog-section-bg: var(--palette-black-01);
  --blog-card-bg: var(--palette-black-02);
  --blog-card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  --blog-card-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.5);
  
  --blog-post-title-color: var(--palette-white);
  --blog-post-title-hover: var(--palette-red-03);
  --blog-post-meta-color: var(--palette-black-07);
  --blog-post-text-color: var(--palette-black-08);
  --blog-post-overlay: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  
  --blog-readmore-color: var(--palette-red-03);
  
  --blog-pagination-bg: var(--palette-black-02);
  --blog-pagination-border: var(--palette-black-04);
  --blog-pagination-text: var(--palette-black-09);
  --blog-pagination-active-bg: var(--palette-red-03);
  --blog-pagination-hover-bg: var(--palette-black-03);
  --blog-pagination-hover-border: var(--palette-red-03);
  --blog-pagination-hover-text: var(--palette-red-03);
}

/* -------------------------------------------------------------------------- */
/* 🇬🇧   Dark mode variables from components
/* 🇧🇷🇵🇹 Variáveis do modo escuro nos componentes
/* -------------------------------------------------------------------------- */
body.theme-dark .single-post-container
{
  background-color: var(--palette-black-01);
}

body.theme-dark .title-box
{
  border-color: var(--palette-white);
}

body.theme-dark .title-box h2,
body.theme-dark .help-card h3,
body.theme-dark .faq-question,
body.theme-dark .faq-ornament,
body.theme-dark .form-label,
body.theme-dark .content-wrapper strong,
body.theme-dark .content-wrapper h2,
body.theme-dark .content-wrapper h3
{
  color: var(--palette-white);
}

body.theme-dark .testimonials-section h2,
body.theme-dark .help-section h2,
body.theme-dark .faq-section h2,
body.theme-dark .contact-section h2,
body.theme-dark .partners-section h2
{
  color: var(--palette-red-03);
}

body.theme-dark .faq-section .faq-section-subtitle
{
  color: var(--palette-green-04);
}

body.theme-dark .faq-answer strong,
body.theme-dark .contact-section-subtitle
{
  color: var(--palette-black-10);
}

body.theme-dark .help-card p,
body.theme-dark .help-section .subtitle,
body.theme-dark .faq-answer p,
body.theme-dark .contact-lead,
body.theme-dark .content-wrapper
{
  color: var(--palette-black-09);
}

body.theme-dark .testimonial-item p
{
  color: var(--palette-black-10);
}

body.theme-dark .author-name
{
  color: var(--palette-black-09);
}

body.theme-dark .author-role
{
  color: var(--palette-black-07);
}

body.theme-dark .testimonial-item .company-name
{
  color: var(--palette-yellow-01);
}

body.theme-dark .card-blur-bg
{
  background-color: rgba(255 255 255 / 0.15);
}

body.theme-dark .monogram-img,
body.theme-dark .help-section .help-card .card-content .card-icon
{
  filter: brightness(0) invert(1);
}

body.theme-dark .partner-logo
{
  filter: grayscale(100%) invert(1);
}

body.theme-dark .partner-item:hover .partner-logo
{
  filter: grayscale(0%) invert(0);
}

body.theme-dark .faq-item[open] .faq-ornament
{
  color: var(--palette-red-03);
}

body.theme-dark .form-input
{
  border-bottom-color: var(--palette-black-10);
  color: var(--palette-white);
}