/**
 * Theme Variables - DataLab UERJ
 * Design baseado no site original www.datalab.net.br
 */

:root {
  /* ============================================
     PRIMARY COLORS - DataLab Original
     ============================================ */
  --color-primary: #1a3a52;           /* Navy Azul - Cor principal */
  --color-primary-light: #2a5278;     /* Navy mais claro para hover */
  --color-primary-dark: #0f2438;      /* Navy mais escuro */

  /* ============================================
     ACCENT COLORS - DataLab Green
     ============================================ */
  --color-accent: #4a8b6e;            /* Verde DataLab - Acentos */
  --color-accent-light: #6ba88b;      /* Verde claro */
  --color-accent-dark: #3a6b52;       /* Verde escuro */

  /* ============================================
     NEUTRAL COLORS - Text & Backgrounds
     ============================================ */
  --color-text: #2c3e50;              /* Cinza escuro para texto */
  --color-text-light: #5a6c7d;        /* Cinza médio */
  --color-text-lighter: #8b96a3;      /* Cinza claro */
  --color-text-white: #ffffff;        /* Branco */

  --color-bg: #ffffff;                /* Branco puro */
  --color-bg-light: #f8f9fb;          /* Branco muito claro */
  --color-bg-section: #e8eef5;        /* Cinza azulado claro - seções */
  --color-bg-dark: #1a3a52;           /* Navy para footer */

  /* ============================================
     BORDERS & DIVIDERS
     ============================================ */
  --color-border: #d0dce6;            /* Borda clara */
  --color-border-light: #e8eef5;      /* Borda muito clara */
  --color-border-dark: #4a5568;       /* Borda escura */

  /* ============================================
     LINK COLORS
     ============================================ */
  --color-link: #1a3a52;              /* Navy para links */
  --color-link-hover: #4a8b6e;        /* Verde ao hover */
  --color-link-visited: #0f2438;      /* Navy mais escuro para visitados */

  /* ============================================
     SHADOW SYSTEM
     ============================================ */
  --shadow-sm: 0 1px 3px rgba(26, 58, 82, 0.12);
  --shadow-md: 0 4px 12px rgba(26, 58, 82, 0.15);
  --shadow-lg: 0 12px 24px rgba(26, 58, 82, 0.2);
  --shadow-xl: 0 20px 40px rgba(26, 58, 82, 0.25);

  /* ============================================
     TYPOGRAPHY SYSTEM - Professional
     ============================================ */
  --font-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-serif: 'Playfair Display', 'Georgia', serif;
  --font-mono: 'Courier New', monospace;

  /* Tipografia em escala profissional */
  --font-size-xs: 0.75rem;            /* 12px */
  --font-size-small: 0.875rem;        /* 14px */
  --font-size-base: 1rem;             /* 16px */
  --font-size-lg: 1.125rem;           /* 18px */
  --font-size-xl: 1.25rem;            /* 20px */
  --font-size-2xl: 1.5rem;            /* 24px */
  --font-size-3xl: 1.875rem;          /* 30px */
  --font-size-4xl: 2.25rem;           /* 36px */
  --font-size-5xl: 3rem;              /* 48px */
  --font-size-6xl: 3.75rem;           /* 60px */

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ============================================
     SPACING SCALE - Baseada em 8px
     ============================================ */
  --spacing-xs: 0.25rem;              /* 4px */
  --spacing-sm: 0.5rem;               /* 8px */
  --spacing-md: 1rem;                 /* 16px */
  --spacing-lg: 1.5rem;               /* 24px */
  --spacing-xl: 2rem;                 /* 32px */
  --spacing-2xl: 3rem;                /* 48px */
  --spacing-3xl: 4rem;                /* 64px */
  --spacing-4xl: 5rem;                /* 80px */

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

  /* ============================================
     LAYOUT
     ============================================ */
  --max-width: 1200px;
  --container-padding: 2rem;

  /* ============================================
     TRANSITIONS & ANIMATIONS
     ============================================ */
  --transition-fast: 0.15s ease-in-out;
  --transition-base: 0.25s ease-in-out;
  --transition-slow: 0.35s ease-in-out;
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: #e2e8f0;
    --color-text-light: #cbd5e0;
    --color-text-lighter: #94a3b8;

    --color-bg: #0f1419;
    --color-bg-light: #1a2332;
    --color-bg-section: #1e2a3d;
    --color-bg-dark: #0a0f1e;

    --color-border: #334155;
    --color-border-light: #475569;
  }
}

/* ============================================
   ACCESSIBILITY - HIGH CONTRAST
   ============================================ */
@media (prefers-contrast: more) {
  :root {
    --color-text: #000000;
    --color-bg: #ffffff;
    --color-link: #000099;
    --color-border: #000000;
    --color-primary: #000099;
    --color-accent: #009900;
  }
}