/**
 * Variaveis de Design System - ISA Engenharia
 * Tema: isa-proto-v2
 */

:root {
  /* ==========================================================================
     1) Tipografia e Fontes
     ========================================================================== */
  --font-body: 'Inter', sans-serif;
  --font-title: 'Hanken Grotesk', sans-serif;
  --font-heading: var(--font-title);

  /* ==========================================================================
     2) Dimensoes e Layout
     ========================================================================== */
  --isa-content-width: 1280px;
  --height-base: 44px;
  --header-height: 4.5rem;
  --isa-identity-content: min(var(--isa-content-width), calc(100% - 3rem));

  /* ==========================================================================
     3) Arredondamento e Bordas
     ========================================================================== */
  --border-radius-sm: 0.25rem;
  --border-radius-compact: 0.5rem;
  --border-radius-base: 0 1.5rem 0.75rem;
  --border-radius-md: 0.75rem;
  --border-radius-lg: 1rem;
  --border-radius-xl: 1.5rem;
  --border-radius-2xl: 2.5rem;
  --border-radius-full: 50%;

  /* ==========================================================================
     4) Paleta Principal da Marca (Brand Colors)
     ========================================================================== */
  --color-primary: #00448c;
  --color-primary-rgb: 0, 68, 140;
  --color-primary-hover: #003670;
  --color-primary-light: #2667ad;
  --color-primary-soft: #d7e3ff;
  --color-primary-subtle: #f1f3ff;
  --color-accent: #5a93ff;
  --color-accent-light: #89b4ff;

  --color-secondary: var(--color-text);
  --color-secondary-hover: #1f2737;

  /* ==========================================================================
     5) Superficies, Fundos e Neutros
     ========================================================================== */
  --bg-default: #eeeef3;
  --bg-light: #f1f3ff;
  --bg-surface: #f9f9ff;
  --bg-card: #dfe3fa;
  --bg-alt: #e3e8f9;
  --bg-alt-light: #e8eeff;
  --color-surface-container-low: #f4f7f8;
  --color-white: #ffffff;
  --color-white-rgb: 255, 255, 255;

  /* ==========================================================================
     6) Cores de Texto
     ========================================================================== */
  --color-text: #272c35;
  --color-text-rgb: 39, 44, 53;
  --color-text-light: #f7f7f7;
  --color-text-muted: #424752;
  --color-text-subtle: #727783;

  /* ==========================================================================
     7) Bordas e Divisores
     ========================================================================== */
  --color-border: #c2c6d4;
  --color-border-light: #e1e3eb;
  --color-border-subtle: #dde2f3cc;

  /* ==========================================================================
     8) Cores de Informacao e Feedback
     ========================================================================== */
  --info-color: var(--color-primary-light);
  --info-color-light: #5b8ec5;

  /* ==========================================================================
     9) Paleta da Presenca Geografica
     ========================================================================== */
  --color-presence-deep: #001b3e;
  --color-presence-deep-rgb: 0, 27, 62;
  --color-presence-mid: #00458e;
  --color-presence-bright: #2667ad;
  --color-presence-highlight: #2667ad;
  --color-presence-text: var(--color-primary);
  --color-presence-glow-rgb: 39, 174, 224;
  --color-presence-shadow-rgb: 8, 47, 73;

  --bg-gradient-primary: linear-gradient(135deg, var(--color-presence-bright) 0%, var(--color-presence-mid) 38%, var(--color-presence-deep) 100%);
  --bg-gradient-secundary: linear-gradient(135deg, var(--color-presence-deep) 0%, var(--color-presence-mid) 58%, var(--color-presence-bright) 100%);

  /* ==========================================================================
     10) Sombras e Elevacoes (Elevation)
     ========================================================================== */
  --shadow-sm: 0 4px 10px rgba(0, 0, 0, 0.08);
  --boxShadow: var(--shadow-sm);
  --shadow-md: 0 12px 24px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.16);
  --shadow-xl: 0 20px 25px -8px rgba(0, 0, 0, 0.20);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-card-hover: 0 12px 28px rgba(22, 28, 39, 0.10);
  --shadow-focus-ring: 0 0 0 0.2rem rgba(0, 68, 140, 0.14);
  --text-shadow: 2px 1px 4px rgb(0 0 0 / 0%);

  /* ==========================================================================
     11) Efeitos e Transicoes
     ========================================================================== */
  --transition: all 0.3s ease;
  --transition-fast: all 0.2s ease;
  --transition-header: background-color 0.35s ease, box-shadow 0.35s ease, height 0.35s ease;

  /* ==========================================================================
     12) Aliases de Compatibilidade (Tokens Legados Unificados)
     ========================================================================== */
  --white-color: var(--color-white);
  --isa-color-white: var(--color-white);
  --isa-color-blue: var(--color-primary);
  --isa-color-blue-light: var(--color-accent-light);
  --isa-color-gray-dark: var(--color-text);
  --isa-color-surface: var(--bg-surface);
  --isa-color-surface-soft: var(--bg-light);
  --isa-color-border: var(--color-border);
  --isa-color-text: var(--color-text);
  --isa-color-text-muted: var(--color-text-muted);
  --isa-font-heading: var(--font-title);
  --isa-font-body: var(--font-body);
}


/* ==========================================================================
   Classes de Cor de Texto (Base)
   ========================================================================== */
.text-black,
.text-dark,
a.text-black,
a.text-dark {
  color: var(--color-text) !important;
}

.text-light,
a.text-light {
  color: var(--color-text-subtle) !important;
}

.text-success,
a.text-success {
  color: var(--color-accent) !important;
}

.text-secondary,
a.text-secondary {
  color: var(--color-secondary) !important;
}

.text-primary,
a.text-primary {
  color: var(--color-primary) !important;
}

.text-primary-light,
a.text-primary-light {
  color: var(--color-primary-light) !important;
}

/* ==========================================================================
   Estados Interativos Correlativos (Hover / Focus)
   ========================================================================== */
a.text-black:hover,
a.text-black:focus-visible,
a.text-dark:hover,
a.text-dark:focus-visible {
  color: var(--color-secondary-hover) !important;
}

a.text-light:hover,
a.text-light:focus-visible {
  color: var(--color-text) !important;
}

a.text-success:hover,
a.text-success:focus-visible {
  color: var(--color-accent-light) !important;
}

a.text-secondary:hover,
a.text-secondary:focus-visible {
  color: var(--color-secondary-hover) !important;
}

a.text-primary:hover,
a.text-primary:focus-visible {
  color: var(--color-primary-hover) !important;
}

a.text-primary-light:hover,
a.text-primary-light:focus-visible {
  color: var(--color-primary) !important;
}