/* =========================================================
   TOKENS — DESIGN SYSTEM
   =========================================================

   Fonte central das variáveis globais utilizadas
   pelo sistema visual do projecto.

   Estrutura:

   01. Brand Palette
   02. Neutral Palette
   03. State Palette
   04. Semantic Colors
   05. Typography
   06. Spacing
   07. Sizing
   08. Radius
   09. Shadows
   10. Motion
   11. Layout
   12. Component Tokens
   13. Accessibility
   14. Z-Index
   15. Theme Bridge

   Regra:
   Este ficheiro define valores e relações entre tokens.

   Não colocar aqui:
   - Estilos de componentes
   - Selectores de páginas
   - Media queries
   - Overrides directos de temas ou plugins
   ========================================================= */

:root {
  /*
  ========================================================
  01. BRAND PALETTE
  ========================================================
  */

  /*
  --------------------------------------------------------
  PRIMARY
  --------------------------------------------------------
  */

  --color-primary-50: #f2f4ff;
  --color-primary-100: #e3e7ff;
  --color-primary-200: #c9d0ff;
  --color-primary-300: #a5b1ff;
  --color-primary-400: #7385f7;

  --color-primary-500: #021a74;

  --color-primary-600: #021765;
  --color-primary-700: #021354;
  --color-primary-800: #020f43;
  --color-primary-900: #010b32;
  --color-primary-950: #01061d;

  /*
  --------------------------------------------------------
  SECONDARY
  --------------------------------------------------------
  */

  --color-secondary-50: #f1f7fd;
  --color-secondary-100: #e1eefb;
  --color-secondary-200: #c8dff7;
  --color-secondary-300: #9fc8f1;
  --color-secondary-400: #6fa9e7;

  --color-secondary-500: #2b71ca;

  --color-secondary-600: #245fb0;
  --color-secondary-700: #1f4e91;
  --color-secondary-800: #1c4276;
  --color-secondary-900: #1b3862;
  --color-secondary-950: #112441;

  /*
  --------------------------------------------------------
  ACCENT
  --------------------------------------------------------
  */

  --color-accent-50: #fff4f1;
  --color-accent-100: #ffe5df;
  --color-accent-200: #ffcfc4;
  --color-accent-300: #fda896;
  --color-accent-400: #f5755b;

  --color-accent-500: #dd3f25;

  --color-accent-600: #c8321d;
  --color-accent-700: #a72919;
  --color-accent-800: #89251b;
  --color-accent-900: #71231c;
  --color-accent-950: #3d0f0a;

  /*
  --------------------------------------------------------
  SUPPORT
  --------------------------------------------------------

  Cores complementares da identidade visual.

  Utilizadas para criar contraste, profundidade,
  hierarquia e apoio visual à paleta principal.
  --------------------------------------------------------
  */
  --color-support-deep: #080f33;
  --color-support-dark: #0c2340;
  --color-support-medium: #14449b;
  --color-support-light: #418ede;
  --color-support-dark-rgb: 12, 35, 64;
  --color-support-medium-rgb: 20, 68, 155;
  --color-support-light-rgb: 65, 142, 222;

  /*
  --------------------------------------------------------
  BRAND SEMANTIC
  --------------------------------------------------------
  */

  --color-primary: var(--color-primary-500);
  --color-primary-hover: var(--color-primary-600);
  --color-primary-light: var(--color-primary-100);
  --color-primary-dark: var(--color-primary-800);
  --color-primary-rgb: 2, 26, 116;

  --color-secondary: var(--color-secondary-500);
  --color-secondary-hover: var(--color-secondary-600);
  --color-secondary-light: var(--color-secondary-100);
  --color-secondary-dark: var(--color-secondary-800);
  --color-secondary-rgb: 43, 113, 202;

  --color-accent: var(--color-accent-500);
  --color-accent-hover: var(--color-accent-600);
  --color-accent-light: var(--color-accent-100);
  --color-accent-dark: var(--color-accent-800);
  --color-accent-rgb: 221, 63, 37;

  /*
  ========================================================
  02. NEUTRAL PALETTE
  ========================================================
  */

  --color-neutral-0: #ffffff;

  --color-neutral-50: #fafbfc;

  --color-neutral-100: #f5f8fc;
  --color-neutral-200: #e8ebef;
  --color-neutral-300: #d5dae1;
  --color-neutral-400: #aab2bf;

  --color-neutral-500: #7d8796;

  --color-neutral-600: #51515e;
  --color-neutral-700: #41414b;
  --color-neutral-800: #333333;
  --color-neutral-900: #2d2c39;

  --color-neutral-950: #1c1b24;

  --color-neutral-900-rgb: 45, 44, 57;

  --color-white: var(--color-neutral-0);

  --color-black: #000000;

  /*
  ========================================================
  03. STATE PALETTE
  ========================================================
  */

  /*
  --------------------------------------------------------
  SUCCESS
  --------------------------------------------------------
  */

  --color-success: #16a34a;
  --color-success-light: #dcfce7;
  --color-success-dark: #15803d;

  /*
  --------------------------------------------------------
  WARNING
  --------------------------------------------------------
  */

  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-warning-dark: #b45309;

  /*
  --------------------------------------------------------
  DANGER
  --------------------------------------------------------
  */

  --color-danger: #dc2626;
  --color-danger-light: #fee2e2;
  --color-danger-dark: #b91c1c;

  /*
  --------------------------------------------------------
  INFORMATION
  --------------------------------------------------------
  */

  --color-info: #2563eb;
  --color-info-light: #dbeafe;
  --color-info-dark: #1d4ed8;

  /*
  ========================================================
  04. SEMANTIC COLORS
  ========================================================
  */

  /*
  --------------------------------------------------------
  TEXT
  --------------------------------------------------------
  */

  --text-primary: var(--color-neutral-900);

  --text-heading: var(--text-primary);

  --text-secondary: var(--color-neutral-600);

  --text-muted: var(--color-neutral-500);

  --text-subtle: var(--color-neutral-400);

  --text-inverse: var(--color-white);

  --text-brand: var(--color-primary);

  --text-brand-secondary: var(--color-secondary);

  --text-accent: var(--color-accent);

  --text-support: var(--color-support-medium);

  /*
  --------------------------------------------------------
  LINKS
  --------------------------------------------------------
  */

  --link-color: var(--color-primary);

  --link-color-hover: var(--color-secondary);

  --link-decoration-color: currentColor;

  /*
  --------------------------------------------------------
  BACKGROUNDS / SURFACES
  --------------------------------------------------------
  */

  --surface-page: var(--color-neutral-100);

  --surface-default: var(--color-white);

  --surface-alt: var(--color-neutral-50);

  --surface-subtle: var(--color-neutral-50);

  --surface-muted: var(--color-neutral-100);

  --surface-brand: var(--color-primary);

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

  --surface-accent: var(--color-accent);

  --surface-support: var(--color-support-medium);

  --surface-dark: var(--color-support-dark);

  --surface-inverse: var(--color-primary);

  /* Page Header */

  --surface-page-header: var(--color-support-deep);

  /*
  --------------------------------------------------------
  BORDERS
  --------------------------------------------------------
  */

  --border-light: var(--color-neutral-200);

  --border-default: var(--color-neutral-300);

  --border-strong: var(--color-neutral-400);

  --border-dark: var(--color-neutral-700);

  --border-brand: var(--color-primary);

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

  --border-accent: var(--color-accent);

  --border-support: var(--color-support-light);

  /*
  --------------------------------------------------------
  OVERLAYS
  --------------------------------------------------------
  */

  --overlay-light: rgba(255, 255, 255, 0.8);

  --overlay-dark: rgba(var(--color-support-dark-rgb), 0.5);

  --overlay-darker: rgba(var(--color-support-dark-rgb), 0.7);

  --overlay-deep: rgba(var(--color-support-dark-rgb), 0.85);

  --overlay-primary: rgba(var(--color-primary-rgb), 0.82);

  /*
  --------------------------------------------------------
  GRADIENTS
  --------------------------------------------------------
  */

  --gradient-primary: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-primary-dark)
  );

  --gradient-secondary: linear-gradient(
    135deg,
    var(--color-secondary-400),
    var(--color-secondary-700)
  );

  --gradient-brand: linear-gradient(
    135deg,
    var(--color-primary),
    var(--color-secondary)
  );

  --gradient-dark: linear-gradient(
    135deg,
    var(--color-support-dark),
    var(--color-neutral-900)
  );

  /*
  ========================================================
  05. TYPOGRAPHY
  ========================================================
  */

  /*
  --------------------------------------------------------
  FONT FAMILIES
  --------------------------------------------------------
  */

  --font-primary: "Inter", Arial, sans-serif;

  --font-secondary: "Poppins", Arial, sans-serif;

  /*
  --------------------------------------------------------
  SEMANTIC FONT FAMILIES
  --------------------------------------------------------
  */

  --font-body: var(--font-primary);

  --font-heading: var(--font-secondary);

  --font-menu: var(--font-primary);

  --font-button: var(--font-primary);

  --font-form: var(--font-primary);

  --font-caption: var(--font-primary);

  --font-card-title: var(--font-secondary);

  --font-card-text: var(--font-primary);

  --font-footer: var(--font-primary);

  --font-footer-heading: var(--font-secondary);

  --font-widget-title: var(--font-secondary);

  /*
  --------------------------------------------------------
  FONT SCALE
  --------------------------------------------------------
  */

  --font-size-12: 0.75rem; /* 12px */
  --font-size-13: 0.8125rem; /* 13px */
  --font-size-14: 0.875rem; /* 14px */
  --font-size-15: 0.9375rem; /* 15px */
  --font-size-16: 1rem; /* 16px */
  --font-size-18: 1.125rem; /* 18px */
  --font-size-20: 1.25rem; /* 20px */
  --font-size-24: 1.5rem; /* 24px */
  --font-size-30: 1.875rem; /* 30px */
  --font-size-36: 2.25rem; /* 36px */
  --font-size-40: 2.5rem; /* 40px */
  --font-size-48: 3rem; /* 48px */
  --font-size-56: 3.5rem; /* 56px */
  --font-size-64: 4rem; /* 64px */

  /*
  --------------------------------------------------------
  SEMANTIC FONT SIZES
  --------------------------------------------------------
  */

  --font-size-body: var(--font-size-16);

  --font-size-small: var(--font-size-14);

  --font-size-caption: var(--font-size-14);

  --font-size-meta: var(--font-size-14);

  --font-size-menu: var(--font-size-15);

  --font-size-button: var(--font-size-15);

  --font-size-form: var(--font-size-16);

  --font-size-lead: var(--font-size-20);

  --font-size-card-title: var(--font-size-20);

  --font-size-card-text: var(--font-size-16);

  --font-size-footer: var(--font-size-15);

  --font-size-footer-heading: var(--font-size-18);

  --font-size-widget-title: var(--font-size-18);

  --font-size-overline: var(--font-size-12);

  /*
  --------------------------------------------------------
  HEADINGS
  --------------------------------------------------------
  */

  --font-size-h1: clamp(2.5rem, 5vw, 3.5rem);

  --font-size-h2: clamp(2rem, 4vw, 3rem);

  --font-size-h3: clamp(1.5rem, 3vw, 2.5rem);

  --font-size-h4: clamp(1.25rem, 2vw, 1.5rem);

  --font-size-h5: var(--font-size-20);

  --font-size-h6: var(--font-size-18);

  /*
  --------------------------------------------------------
  DISPLAY
  --------------------------------------------------------
  */

  --font-size-hero: clamp(2.75rem, 6vw, 5rem);

  --font-size-page-title: clamp(2.25rem, 5vw, 3.5rem);

  --font-size-section-title: clamp(1.75rem, 3vw, 2.25rem);

  --font-size-cta-title: clamp(1.5rem, 3vw, 2rem);

  /*
  --------------------------------------------------------
  FONT WEIGHTS
  --------------------------------------------------------
  */

  --font-weight-regular: 400;

  --font-weight-medium: 500;

  --font-weight-semibold: 600;

  --font-weight-bold: 700;

  /*
  --------------------------------------------------------
  SEMANTIC FONT WEIGHTS
  --------------------------------------------------------
  */

  --font-weight-body: var(--font-weight-regular);

  --font-weight-heading: var(--font-weight-medium);

  --font-weight-menu: var(--font-weight-medium);

  --font-weight-button: var(--font-weight-medium);

  --font-weight-form-label: var(--font-weight-medium);

  --font-weight-card-title: var(--font-weight-semibold);

  --font-weight-footer: var(--font-weight-regular);

  --font-weight-footer-heading: var(--font-weight-semibold);

  --font-weight-widget-title: var(--font-weight-semibold);

  --font-weight-hero: var(--font-weight-bold);

  /*
  --------------------------------------------------------
  LINE HEIGHT
  --------------------------------------------------------
  */

  --line-height-none: 1;

  --line-height-display: 1.05;

  --line-height-tight: 1.2;

  --line-height-snug: 1.35;

  --line-height-base: 1.6;

  --line-height-relaxed: 1.75;

  --line-height-44: 2.75rem; /* 44px */

  /*
  --------------------------------------------------------
  SEMANTIC LINE HEIGHT
  --------------------------------------------------------
  */

  --line-height-body: var(--line-height-base);

  --line-height-heading: var(--line-height-tight);

  --line-height-lead: var(--line-height-relaxed);

  --line-height-caption: var(--line-height-base);

  --line-height-card: var(--line-height-base);

  --line-height-footer: var(--line-height-base);

  --line-height-button: var(--line-height-44);

  /*
  --------------------------------------------------------
  LETTER SPACING
  --------------------------------------------------------
  */

  --letter-spacing-tight: -0.025em;

  --letter-spacing-normal: 0;

  --letter-spacing-wide: 0.025em;

  --letter-spacing-wider: 0.075em;

  /*
  --------------------------------------------------------
  SEMANTIC LETTER SPACING
  --------------------------------------------------------
  */

  --letter-spacing-body: var(--letter-spacing-normal);

  --letter-spacing-heading: var(--letter-spacing-tight);

  --letter-spacing-menu: var(--letter-spacing-normal);

  --letter-spacing-button: var(--letter-spacing-normal);

  --letter-spacing-caption: var(--letter-spacing-normal);

  --letter-spacing-overline: var(--letter-spacing-wider);

  /*
  --------------------------------------------------------
  TEXT BEHAVIOUR
  --------------------------------------------------------
  */

  --text-lines-1: 1;

  --text-lines-2: 2;

  --text-lines-3: 3;

  --text-lines-4: 4;

  /*
  ========================================================
  06. SPACING
  ========================================================
  */

  --space-xxs: 0.25rem; /* 4px */

  --space-xs: 0.5rem; /* 8px */

  --space-sm: 0.75rem; /* 12px */

  /* Intermediate */
  --space-15: 0.9375rem; /* 15px */

  --space-md: 1rem; /* 16px */

  /* Intermediate */
  --space-20: 1.25rem; /* 20px */

  --space-lg: 1.5rem; /* 24px */

  --space-xl: 2rem; /* 32px */

  --space-2xl: 3rem; /* 48px */

  --space-3xl: 4rem; /* 64px */

  --space-4xl: 5rem; /* 80px */

  --space-5xl: 7.5rem; /* 120px */

  --space-6xl: 10rem; /* 160px */

  /*
  --------------------------------------------------------
  SEMANTIC SPACING
  --------------------------------------------------------
  */

  --section-padding-y: clamp(3.5rem, 7vw, 5rem);

  --section-gap: clamp(2.5rem, 5vw, 3.75rem);

  --content-gap: clamp(1.5rem, 3vw, 2rem);

  /*
  ========================================================
  07. SIZING
  ========================================================
  */

  /*
  --------------------------------------------------------
  ICONS
  --------------------------------------------------------
  */

  --icon-size-sm: 1rem;

  --icon-size-md: 1.25rem;

  --icon-size-lg: 1.5rem;

  --icon-size-xl: 2rem;

  /*
  --------------------------------------------------------
  ASPECT RATIOS
  --------------------------------------------------------
  */

  --ratio-square: 1 / 1;

  --ratio-landscape: 4 / 3;

  --ratio-video: 16 / 9;

  --ratio-wide: 21 / 9;

  /*
  ========================================================
  08. RADIUS
  ========================================================
  */

  --radius-none: 0;

  --radius-2: 2px;

  --radius-4: 4px;

  --radius-6: 6px;

  --radius-8: 8px;

  --radius-10: 10px;

  --radius-12: 12px;

  --radius-16: 16px;

  --radius-24: 24px;

  --radius-pill: 999px;

  --radius-circle: 50%;

  /*
  ========================================================
  09. SHADOWS
  ========================================================
  */

  --shadow-none: none;

  --shadow-xs: 0 1px 2px rgba(var(--color-support-dark-rgb), 0.05);

  --shadow-sm: 0 1px 3px rgba(var(--color-support-dark-rgb), 0.08);

  --shadow-md: 0 4px 10px rgba(var(--color-support-dark-rgb), 0.1);

  --shadow-lg: 0 10px 25px rgba(var(--color-support-dark-rgb), 0.12);

  --shadow-xl: 0 20px 40px rgba(var(--color-support-dark-rgb), 0.15);

  /*
  ========================================================
  10. MOTION
  ========================================================
  */

  /*
  --------------------------------------------------------
  DURATION
  --------------------------------------------------------
  */

  --duration-fast: 150ms;

  --duration-base: 250ms;

  --duration-slow: 400ms;

  /*
  --------------------------------------------------------
  EASING
  --------------------------------------------------------
  */

  --ease-standard: ease;

  --ease-in: ease-in;

  --ease-out: ease-out;

  --ease-in-out: ease-in-out;

  /*
  --------------------------------------------------------
  TRANSITIONS
  --------------------------------------------------------
  */

  --transition-fast: var(--duration-fast) var(--ease-standard);

  --transition-base: var(--duration-base) var(--ease-standard);

  --transition-slow: var(--duration-slow) var(--ease-in-out);

  /*
  ========================================================
  11. LAYOUT
  ========================================================
  */

  /*
  --------------------------------------------------------
  CONTAINERS
  --------------------------------------------------------
  */

  --container-width: 1240px;

  --container-wide: 1400px;

  --container-narrow: 900px;

  --container-padding-x: 15px;

  /*--container-padding-x: clamp(1.25rem, 3vw, 1.875rem);*/

  /*
  --------------------------------------------------------
  CONTENT WIDTH
  --------------------------------------------------------
  */

  --content-width: var(--container-width);

  --content-width-narrow: var(--container-narrow);

  --content-width-wide: var(--container-wide);

  /*
  --------------------------------------------------------
  GRID
  --------------------------------------------------------
  */

  --grid-gap-sm: var(--space-md);

  --grid-gap-md: var(--space-lg);

  --grid-gap-lg: var(--space-xl);

  --grid-gap-xl: var(--space-2xl);

  --grid-min-card: 280px;

  /*
  ========================================================
  12. COMPONENT TOKENS
  ========================================================
  */

  /*
  --------------------------------------------------------
  BUTTONS — PRIMARY
  --------------------------------------------------------
  */

  --btn-primary-bg: var(--color-accent);

  --btn-primary-bg-hover: var(--color-accent-hover);

  --btn-primary-text: var(--text-inverse);

  --btn-primary-border: var(--color-accent);

  /*
  --------------------------------------------------------
  BUTTONS — SECONDARY
  --------------------------------------------------------
  */

  --btn-secondary-bg: var(--color-secondary);

  --btn-secondary-bg-hover: var(--color-secondary-hover);

  --btn-secondary-text: var(--text-inverse);

  --btn-secondary-border: var(--color-secondary);

  /*
  --------------------------------------------------------
  BUTTONS — ACCENT
  --------------------------------------------------------
  */

  --btn-accent-bg: var(--color-accent);

  --btn-accent-bg-hover: var(--color-accent-hover);

  --btn-accent-text: var(--text-inverse);

  --btn-accent-border: var(--color-accent);

  /*
  --------------------------------------------------------
  BUTTONS — OUTLINE
  --------------------------------------------------------
  */

  --btn-outline-bg: transparent;

  --btn-outline-bg-hover: var(--color-primary);

  --btn-outline-text: var(--color-primary);

  --btn-outline-text-hover: var(--text-inverse);

  --btn-outline-border: var(--color-primary);

  /*
  --------------------------------------------------------
  BUTTONS — GENERAL
  --------------------------------------------------------
  */

  --btn-disabled-bg: var(--color-neutral-300);

  --btn-disabled-text: var(--color-neutral-500);

  --btn-height-sm: 40px;

  --btn-height-md: 48px;

  --btn-height-lg: 56px;

  --btn-padding-x: 24px;

  --btn-radius: var(--radius-6);

  --btn-shadow: var(--shadow-none);

  --btn-shadow-hover: var(--shadow-sm);

  /*
  --------------------------------------------------------
  CARDS
  --------------------------------------------------------
  */

  --card-bg: var(--surface-default);

  --card-border: var(--border-default);

  --card-border-hover: var(--border-strong);

  --card-radius: var(--radius-6);

  --card-padding: clamp(1.25rem, 3vw, 1.875rem);

  --card-shadow: var(--shadow-xs);

  --card-shadow-hover: var(--shadow-sm);

  /*
  --------------------------------------------------------
  FORMS
  --------------------------------------------------------
  */

  --input-bg: var(--surface-default);

  --input-text: var(--text-primary);

  --input-placeholder: var(--text-muted);

  --input-border: var(--border-default);

  --input-border-hover: var(--border-strong);

  --input-border-focus: var(--border-strong);

  --input-bg-disabled: var(--surface-muted);

  --input-border-disabled: var(--border-default);

  --input-text-disabled: var(--text-muted);

  --input-height: 52px;

  --input-padding-x: 15px;

  --input-padding-y: 5px;

  --input-radius: var(--radius-6);

  --textarea-min-height: 140px;

  --textarea-padding-y: 12px;

  /*
  --------------------------------------------------------
  FORM STATES
  --------------------------------------------------------
  */

  --form-success: var(--color-success);

  --form-warning: var(--color-warning);

  --form-error: var(--color-danger);

  --form-info: var(--color-info);

  /*
  --------------------------------------------------------
  NAVIGATION
  --------------------------------------------------------
  */

  --menu-text: var(--text-primary);

  --menu-text-hover: var(--color-accent);

  --menu-text-active: var(--color-accent);

  --submenu-bg: var(--surface-default);

  --submenu-text: var(--text-primary);

  --submenu-text-hover: var(--color-accent);

  --submenu-text-active: var(--color-accent);

  --submenu-bg-hover: var(--surface-alt);

  --submenu-border: var(--border-light);

  --submenu-shadow: var(--shadow-lg);

  /*
  --------------------------------------------------------
  MOBILE MENU
  --------------------------------------------------------
  */

  --mobile-menu-bg: var(--color-primary-900);

  --mobile-menu-text: var(--text-inverse);

  --mobile-menu-text-hover: var(--color-accent);

  --mobile-menu-text-active: var(--color-accent);

  --mobile-menu-border: var(--border-light);

  --mobile-menu-item-bg: rgba(255, 255, 255, 0.08);

  --mobile-menu-item-bg-hover: rgba(255, 255, 255, 0.12);

  /*
  --------------------------------------------------------
  HEADER
  --------------------------------------------------------
  */

  --header-height: 100px;

  --header-height-sticky: 80px;

  --header-height-mobile: 72px;

  --header-bg: var(--surface-default);

  --header-text: var(--text-primary);

  --header-border: var(--border-light);

  --header-shadow: var(--shadow-xs);

  /*
  --------------------------------------------------------
  HERO
  --------------------------------------------------------
  */

  --hero-min-height: clamp(520px, 70vh, 720px);

  --hero-content-width: 900px;

  --hero-overlay: rgba(var(--color-primary-rgb), 0.62);

  --hero-title-color: var(--text-inverse);

  --hero-text-color: var(--color-neutral-100);

  /*
  --------------------------------------------------------
  PAGE HEADER
  --------------------------------------------------------
  */

  --page-header-min-height: 240px;

  --page-header-padding-y: clamp(3.5rem, 6vw, 5rem);

  --page-header-overlay: rgba(var(--color-primary-rgb), 0.75);

  --page-header-title-color: var(--text-inverse);

  --page-header-text-color: var(--color-neutral-100);

  /*
  --------------------------------------------------------
  FOOTER
  --------------------------------------------------------
  */

  --footer-bg: var(--color-primary-900);

  --footer-widgets-bg: var(--color-primary-900);

  --footer-copyright-bg: var(--color-primary-900);

  --footer-text: rgba(255, 255, 255, 0.78);

  --footer-heading: var(--text-inverse);

  --footer-link: rgba(255, 255, 255, 0.82);

  --footer-link-hover: var(--text-inverse);

  --footer-copyright-link-hover: var(--color-secondary-400);

  --footer-border: rgba(255, 255, 255, 0.12);

  /*
  ========================================================
  13. ACCESSIBILITY
  ========================================================
  */

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

  --focus-width: 3px;

  --focus-offset: 3px;

  --focus-ring: 0 0 0 var(--focus-width) rgba(var(--color-secondary-rgb), 0.25);

  /*
  ========================================================
  14. Z-INDEX
  ========================================================
  */

  --z-base: 1;

  --z-sticky: 800;

  --z-dropdown: 900;

  --z-header: 1000;

  --z-overlay: 1040;

  --z-modal: 1050;

  --z-tooltip: 1100;

  --z-toast: 1200;

  /*
  ========================================================
  15. THEME BRIDGE
  ========================================================

  Reservado para integração entre o Design System
  do tema filho e variáveis utilizadas pelo tema pai,
  framework ou builder.

  Manter vazio quando não for necessário.

  Exemplos de integrações específicas devem ser
  adicionados apenas no projecto correspondente.
  ========================================================
  */

  --primary-color-one: var(--color-primary-500);
  --primary-color-two: var(--color-secondary-500);

  --creote-family-one: var(--font-primary) !important;
  --creote-family-two: var(--font-secondary) !important;
}