/**
 * LATECE Design Tokens — Versão 2.5
 * Sistema de design para o Portal LATECE
 * Refinamento visual para experiência institucional premium
 * Inclui tema Dark Institucional (data-theme="dark")
 */

:root {
  /* ============================================
     CORES — Paleta LATECE (roxo)
     ============================================ */
  --color-purple-900: #2e1065;
  --color-purple-800: #461491;
  --color-purple-700: #5b1fa6;
  --color-purple-600: #6b21a8;
  --color-purple-500: #7c3aed;
  --color-purple-400: #9333ea;
  --color-purple-300: #a78bfa;
  --color-purple-200: #c4b5fd;
  --color-purple-100: #d8b4fe;
  --color-purple-50: #ede9fe;

  /* Primária (principal) */
  --color-primary: var(--color-purple-900);
  --color-primary-dark: #1a0a3a;
  --color-primary-light: var(--color-purple-500);
  --color-primary-hover: var(--color-purple-800);
  --color-primary-active: var(--color-purple-900);
  --color-primary-soft: rgba(46, 16, 101, 0.08);
  --color-primary-gradient: linear-gradient(135deg, #461491 0%, #7f38f1 55%, #5c57a6 100%);

  /* Cores secundárias (complementares) */
  --color-olive-green: #928b45;
  --color-mustard: #b6a752;
  --color-terracotta: #c77a5b;
  --color-burnt-orange: #d29c6c;
  --color-moss-green: #7b855d;
  --color-dark-aqua: #369d85;
  --color-orange-red: #e25822;
  --color-green: #4caf50;

  /* Cores funcionais */
  --color-success: #2e7d32;
  --color-warning: #b76e2e;
  --color-error: #c62828;
  --color-info: #1565c0;

  /* Neutras (refinadas) */
  --color-white: #ffffff;
  --color-gray-50: #f9f9fb;
  --color-gray-100: #f0eff4;
  --color-gray-200: #e2e0e8;
  --color-gray-300: #c8c5d4;
  --color-gray-400: #a8a4b8;
  --color-gray-500: #8a86a0;
  --color-gray-600: #6b6788;
  --color-gray-700: #4d4a6e;
  --color-gray-800: #2f2c54;
  --color-gray-900: #1a1a2e;

  /* Cores de texto e fundo (modo claro) */
  --color-text: var(--color-gray-900);
  --color-text-muted: var(--color-gray-600);
  --color-text-inverse: var(--color-white);
  --color-bg: var(--color-white);
  --color-surface: var(--color-white);
  --color-surface-elevated: var(--color-gray-50);
  --color-border: var(--color-gray-200);
  --color-border-focus: var(--color-purple-500);
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-purple-500);

  /* ============================================
     BACKGROUNDS DE SEÇÕES
     ============================================ */
  --bg-section-light: var(--color-white);
  --bg-section-gray: var(--color-gray-50);
  --bg-section-accent: var(--color-purple-50);
  --bg-section-gradient-subtle: linear-gradient(135deg, var(--color-purple-50) 0%, var(--color-white) 100%);
  --bg-section-gradient-primary-soft: linear-gradient(135deg, var(--color-purple-50) 0%, var(--color-purple-100) 50%, var(--color-white) 100%);
  --bg-section-decoration-color: var(--color-purple-200);

  /* ============================================
     TOKENS PARA HERO / CTA
     ============================================ */
  --color-hero-text: var(--color-white);
  --color-hero-text-muted: rgba(255, 255, 255, 0.85);

  --hero-bg-top: var(--color-purple-800);
  --hero-bg-mid: var(--color-purple-500);
  --hero-bg-bottom: var(--color-purple-900);
  --hero-bg-glow: rgba(255, 255, 255, 0.18);
  --hero-shape-color: rgba(123, 58, 237, 0.35);

  --hero-highlight-start: #f0e6ff;
  --hero-highlight-end: #ffffff;

  /* ============================================
     TIPOGRAFIA
     ============================================ */
  --font-primary: 'Montserrat', sans-serif;
  --font-secondary: 'Open Sans', sans-serif;

  /* Tamanhos (escala tipográfica) */
  --font-size-display: 3.5rem;   /* 56px */
  --font-size-h1: 2.8rem;       /* 44.8px */
  --font-size-h2: 2.2rem;       /* 35.2px */
  --font-size-h3: 1.6rem;       /* 25.6px */
  --font-size-h4: 1.2rem;       /* 19.2px */
  --font-size-h5: 1rem;         /* 16px */
  --font-size-h6: 0.875rem;     /* 14px */
  --font-size-body-lg: 1.125rem;/* 18px */
  --font-size-body: 1rem;       /* 16px */
  --font-size-small: 0.875rem;  /* 14px */
  --font-size-caption: 0.75rem; /* 12px */

  /* Pesos */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --font-extrabold: 800;

  /* Altura de linha */
  --line-height-tight: 1.1;
  --line-height-normal: 1.6;
  --line-height-loose: 1.8;

  /* Letter-spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.04em;

  /* ============================================
     ESPAÇAMENTO (escala)
     ============================================ */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-8: 3rem;      /* 48px */
  --space-10: 4rem;     /* 64px */
  --space-12: 6rem;     /* 96px */
  --space-16: 8rem;     /* 128px */

  /* Aliases para compatibilidade com versões anteriores */
  --spacing-xs: var(--space-1);
  --spacing-sm: var(--space-2);
  --spacing-md: var(--space-4);
  --spacing-lg: var(--space-5);
  --spacing-xl: var(--space-6);
  --spacing-2xl: var(--space-8);
  --spacing-3xl: var(--space-10);
  --spacing-4xl: var(--space-12);

  /* ============================================
     BORDER RADIUS
     ============================================ */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ============================================
     SOMBRAS — refinadas para efeito "flutuante" suave
     ============================================ */
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-medium: 0 6px 16px rgba(0, 0, 0, 0.06);
  --shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.10);
  --shadow-heavy: 0 20px 56px rgba(0, 0, 0, 0.14);

  /* ============================================
     TRANSIÇÕES
     ============================================ */
  --transition-micro: 0.12s ease;
  --transition-fast: 0.25s ease;
  --transition-normal: 0.35s ease;
  --transition-slow: 0.5s ease;
  --transition-default: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ============================================
     Z-INDEX
     ============================================ */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;

  /* ============================================
     ACESSIBILIDADE — FOCO
     ============================================ */
  --focus-ring: 0 0 0 3px rgba(46, 16, 101, 0.25);
  --focus-ring-inset: inset 0 0 0 3px rgba(46, 16, 101, 0.25);

  /* ============================================
     BREAKPOINTS
     ============================================ */
  --breakpoint-mobile: 480px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1400px;

  /* ============================================
     LARGURA MÁXIMA DE CONTEÚDO
     ============================================ */
  --content-width: 1200px;
  --content-width-narrow: 800px;

  /* ============================================
     NOVOS TOKENS PARA REFINAMENTO VISUAL
     ============================================ */
  --btn-border-radius: var(--radius-md);
  --card-padding: var(--space-5);
  --card-border-width: 1px;
  --card-border-color: var(--color-border);
  --card-hover-transform: translateY(-4px);

  --hero-title-font-size: clamp(2.8rem, 7vw, 4.8rem);
  --hero-subtitle-font-size: clamp(1.2rem, 1.8vw, 1.6rem);
  --hero-padding: clamp(3rem, 8vw, 6rem) 0;

  --stat-number-font-size: clamp(2.2rem, 3.5vw, 3.2rem);
  --stat-label-font-size: var(--font-size-small);

  --quick-card-padding: var(--space-6);
  --quick-card-border-radius: var(--radius-lg);
  --quick-card-hover-border-color: var(--color-primary);

  /* ============================================
     FOOTER — token específico
     ============================================ */
  --footer-bg: var(--color-primary-dark);

  /* ============================================
     TOKENS PARA O TEMA DARK (serão sobrescritos)
     ============================================ */
  /* Backgrounds */
  --bg: var(--color-white);
  --bg-alt: var(--color-gray-50);
  --bg-section: var(--color-white);
  --bg-elevated: var(--color-gray-50);
  --bg-hero: var(--color-purple-800);
  --bg-overlay: rgba(0, 0, 0, 0.5);

  /* Superfícies */
  --surface: var(--color-white);
  --surface-hover: var(--color-gray-50);
  --surface-active: var(--color-purple-50);
  --surface-disabled: var(--color-gray-100);
  --surface-modal: var(--color-white);
  --surface-tooltip: var(--color-gray-50);
  --surface-control: var(--color-white);

  /* Textos */
  --text: var(--color-text);
  --text-primary: var(--color-text);
  --text-secondary: var(--color-text-muted);
  --text-muted: var(--color-gray-500);
  --text-subtle: var(--color-gray-400);
  --text-inverse: var(--color-white);
  --text-disabled: var(--color-gray-400);
  --text-on-primary: var(--color-white);
  --text-on-dark: var(--color-white);

  /* Bordas */
  --border: var(--color-border);
  --border-light: var(--color-gray-200);
  --border-strong: var(--color-gray-300);
  --border-interactive: var(--color-primary);
  --border-focus: var(--color-primary-light);
  --border-error: var(--color-error);

  /* Links */
  --link: var(--color-primary);
  --link-hover: var(--color-primary-light);
  --link-active: var(--color-primary-dark);
  --link-visited: var(--color-purple-300);
  --link-on-light: var(--color-primary);

  /* Foco */
  --focus: var(--color-primary-light);
  --focus-visible: var(--color-primary-light);
  --focus-contrast: var(--color-white);
  --focus-inner: var(--color-gray-900);

  /* Estados semânticos */
  --success: var(--color-success);
  --success-bg: var(--color-gray-50);
  --success-text: var(--color-success);
  --warning: var(--color-warning);
  --warning-bg: var(--color-gray-50);
  --warning-text: var(--color-warning);
  --danger: var(--color-error);
  --danger-bg: var(--color-gray-50);
  --danger-text: var(--color-error);
  --info: var(--color-info);
  --info-bg: var(--color-gray-50);
  --info-text: var(--color-info);

  /* Controles */
  --control-bg: var(--color-white);
  --control-text: var(--color-text);
  --control-placeholder: var(--color-gray-400);
  --control-border: var(--color-border);
  --control-hover: var(--color-primary-light);
  --control-active: var(--color-primary-soft);
  --control-disabled: var(--color-gray-100);
  --control-disabled-text: var(--color-gray-400);
  --control-error: var(--color-error);
  --control-success: var(--color-success);

  /* Seleção */
  --selection-bg: var(--color-primary);
  --selection-text: var(--color-white);
  --selection-focus: var(--color-primary-light);

  /* Overlays */
  --overlay: rgba(0, 0, 0, 0.5);
  --overlay-light: rgba(46, 16, 101, 0.08);
  --overlay-dark: rgba(0, 0, 0, 0.7);
  --overlay-hero-glow: rgba(255, 255, 255, 0.12);

  /* Gradientes */
  --gradient-primary: linear-gradient(135deg, #461491 0%, #7f38f1 55%, #5c57a6 100%);
  --gradient-secondary: linear-gradient(135deg, #928b45 0%, #b6a752 50%, #d29c6c 100%);
  --gradient-hero: linear-gradient(to bottom, var(--hero-bg-top) 0%, var(--hero-bg-mid) 45%, var(--hero-bg-bottom) 100%);
  --gradient-section: linear-gradient(135deg, var(--bg-section) 0%, var(--bg-alt) 100%);
  --gradient-soft: linear-gradient(135deg, var(--surface) 0%, var(--surface-hover) 100%);
  --gradient-none: none;
}

/* ============================================================
   TEMA DARK — LATECE Dark Institucional
   ============================================================ */
[data-theme="dark"] {
  /* ===== PALETA PRINCIPAL ===== */
  --color-primary: #B9A3FF;
  --color-primary-dark: #8F73E6;
  --color-primary-light: #D0C3FF;
  --color-primary-hover: #D0C3FF;
  --color-primary-active: #8F73E6;
  --color-primary-soft: rgba(185, 163, 255, 0.16);

  --color-secondary: #E6C76B;
  --color-secondary-hover: #F1D98A;
  --color-secondary-active: #C8A943;
  --color-secondary-soft: rgba(230, 199, 107, 0.16);

  --color-accent: #E6A078;
  --color-accent-hover: #F2B894;
  --color-accent-active: #C97855;
  --color-accent-soft: rgba(230, 160, 120, 0.16);

  /* ===== BACKGROUNDS ===== */
  --bg: #10111F;
  --bg-alt: #17192B;
  --bg-section: #1D2035;
  --bg-elevated: #2D3150;
  --bg-hero: #1A1740;
  --bg-overlay: rgba(5, 6, 15, 0.78);

  /* ===== SUPERFÍCIES ===== */
  --surface: #242842;
  --surface-hover: #2A2F4B;
  --surface-active: #353A5C;
  --surface-disabled: #1A1C2C;
  --surface-modal: #2D3150;
  --surface-tooltip: #353A5C;
  --surface-control: #1D2035;

  /* ===== TEXTOS ===== */
  --text: #F7F5FF;
  --text-primary: #F7F5FF;
  --text-secondary: #D7D3E8;
  --text-muted: #AAA6C2;
  --text-subtle: #8F8BA8;
  --text-inverse: #10111F;
  --text-disabled: #77738F;
  --text-on-primary: #171329;
  --text-on-dark: #F7F5FF;

  /* ===== BORDAS ===== */
  --border: #51577D;
  --border-light: #3D4262;
  --border-strong: #737AA6;
  --border-interactive: #B9A3FF;
  --border-focus: #F1D98A;
  --border-error: #FF8585;

  /* ===== LINKS ===== */
  --link: #D0C3FF;
  --link-hover: #F1D98A;
  --link-active: #E6A078;
  --link-visited: #C8B7F2;
  --link-on-light: #4E35A8;

  /* ===== FOCO ===== */
  --focus: #F1D98A;
  --focus-visible: #F1D98A;
  --focus-contrast: #FFFFFF;
  --focus-inner: #10111F;

  /* ===== ESTADOS SEMÂNTICOS ===== */
  --success: #69D391;
  --success-bg: #173629;
  --success-text: #B7F1C8;
  --warning: #F0C674;
  --warning-bg: #3A3017;
  --warning-text: #FFE8A8;
  --danger: #FF8585;
  --danger-bg: #3C2025;
  --danger-text: #FFC1C1;
  --info: #76B9FF;
  --info-bg: #172D45;
  --info-text: #C0E2FF;

  /* ===== CONTROLES ===== */
  --control-bg: #1D2035;
  --control-text: #F7F5FF;
  --control-placeholder: #AAA6C2;
  --control-border: #737AA6;
  --control-hover: #B9A3FF;
  --control-active: #353A5C;
  --control-disabled: #1A1C2C;
  --control-disabled-text: #77738F;
  --control-error: #3C2025;
  --control-success: #173629;

  /* ===== SELEÇÃO ===== */
  --selection-bg: #6E55C7;
  --selection-text: #FFFFFF;
  --selection-focus: #F1D98A;

  /* ===== OVERLAYS ===== */
  --overlay: rgba(5, 6, 15, 0.78);
  --overlay-light: rgba(185, 163, 255, 0.12);
  --overlay-dark: rgba(0, 0, 0, 0.88);
  --overlay-hero-glow: rgba(240, 232, 255, 0.12);

  /* ===== GRADIENTES ===== */
  --gradient-primary: linear-gradient(135deg, #3B2378 0%, #7657D9 50%, #B9A3FF 100%);
  --gradient-secondary: linear-gradient(135deg, #6A5318 0%, #B18D38 50%, #E6C76B 100%);
  --gradient-hero: linear-gradient(to bottom, #17133D 0%, #352070 45%, #201B4D 100%);
  --gradient-section: linear-gradient(135deg, #1D2035 0%, #242842 50%, #1A1D32 100%);
  --gradient-soft: linear-gradient(135deg, #242842 0%, #2D3150 100%);
  --gradient-none: none;

  /* ===== CORES FUNCIONAIS (sobrescrita) ===== */
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-error: var(--danger);
  --color-info: var(--info);

  /* ===== CORES DE TEXTO E FUNDO ===== */
  --color-text: var(--text);
  --color-text-muted: var(--text-muted);
  --color-text-inverse: var(--text-inverse);
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-surface-elevated: var(--bg-elevated);
  --color-border: var(--border);
  --color-border-focus: var(--border-focus);
  --color-link: var(--link);
  --color-link-hover: var(--link-hover);

  /* ===== BACKGROUNDS DE SEÇÕES ===== */
  --bg-section-light: var(--bg-section);
  --bg-section-gray: var(--bg-alt);
  --bg-section-accent: var(--bg-elevated);
  --bg-section-gradient-subtle: var(--gradient-section);
  --bg-section-gradient-primary-soft: var(--gradient-soft);
  --bg-section-decoration-color: rgba(185, 163, 255, 0.08);

  /* ===== FOOTER ===== */
  --footer-bg: #17192B;

  /* ===== HERO / CTA ===== */
  --color-hero-text: var(--text-on-dark);
  --color-hero-text-muted: var(--text-secondary);
  --hero-bg-top: #17133D;
  --hero-bg-mid: #352070;
  --hero-bg-bottom: #201B4D;
  --hero-bg-glow: var(--overlay-hero-glow);
  --hero-shape-color: rgba(185, 163, 255, 0.15);
  --hero-highlight-start: #C4B5FD;
  --hero-highlight-end: #FFFFFF;

  /* ===== CARD ===== */
  --card-border-color: var(--border);
  --card-hover-transform: translateY(-4px);

  /* ===== QUICK CARD ===== */
  --quick-card-hover-border-color: var(--color-primary);

  /* ===== SOMBRAS (ajuste para escuro) ===== */
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-medium: 0 6px 16px rgba(0, 0, 0, 0.4);
  --shadow-elevated: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-heavy: 0 20px 56px rgba(0, 0, 0, 0.6);

  /* ===== FOCO RING ===== */
  --focus-ring: 0 0 0 3px rgba(185, 163, 255, 0.35);
  --focus-ring-inset: inset 0 0 0 3px rgba(185, 163, 255, 0.35);
}