/**
 * Design System - Variáveis CSS
 *
 * Este arquivo contém todas as variáveis SEMÂNTICAS do Design System do SIDASP
 * Baseado nas especificações do Figma fornecidas pelo webdesigner
 *
 * IMPORTANTE:
 * - As cores BRUTAS estão em colors.css (paleta base)
 * - Este arquivo apenas REFERENCIA as cores da paleta
 * - Sempre use as variáveis semânticas nos componentes (--color-primary, etc)
 *
 * @version 2.0.0
 * @date 2025-11-08
 * @updated Vinculado com colors.css
 */

/* Importa a paleta de cores base */
@import url('./colors.css');

:root {
  /* ============================================================
     TIPOGRAFIA
     ============================================================ */

  /* Famílias de Fonte */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;

  /* Tamanhos de Fonte - Headers */
  --font-size-h1: 32px;
  --font-size-h2: 20px;

  /* Tamanhos de Fonte - Paragraphs */
  --font-size-p1: 16px;
  --font-size-p2: 16px;
  --font-size-p3: 14px;
  --font-size-p4: 14px;
  --font-size-p5: 12px;
  --font-size-p6: 12px;

  /* Line Heights - Headers */
  --line-height-h1: 40px;
  --line-height-h2: 30px;

  /* Line Heights - Paragraphs */
  --line-height-p1: 26px;
  --line-height-p2: 26px;
  --line-height-p3: 24px;
  --line-height-p4: 24px;
  --line-height-p5: 22px;
  --line-height-p6: 22px;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* ============================================================
     CORES - ALIASES (Compatibilidade)
     ============================================================

     Estes aliases facilitam a migração e mantêm compatibilidade.
     IMPORTANTE: As cores brutas vêm de colors.css
     ============================================================ */

  /* Accent (Azul) - Aliases para cores da paleta */
  --color-accent-500: var(--blue-500);
  --color-accent-400: var(--blue-400);
  --color-accent-300: var(--blue-300);  /* COR PRINCIPAL ATUAL */
  --color-accent-200: var(--blue-200);
  --color-accent-100: var(--blue-100);

  /* Green (Verde) - Aliases para cores da paleta */
  --color-green-600: var(--green-600);
  --color-green-500: var(--green-500);
  --color-green-400: var(--green-400);
  --color-green-300: var(--green-300);
  --color-green-200: var(--green-200);
  --color-green-100: var(--green-100);

  /* Yellow (Amarelo) - Aliases para cores da paleta */
  --color-yellow-600: var(--yellow-600);
  --color-yellow-500: var(--yellow-500);
  --color-yellow-450: var(--yellow-450);
  --color-yellow-400: var(--yellow-400);
  --color-yellow-300: var(--yellow-300);
  --color-yellow-200: var(--yellow-200);
  --color-yellow-100: var(--yellow-100);

  /* Red (Vermelho) - Aliases para cores da paleta */
  --color-red-500: var(--red-500);
  --color-red-400: var(--red-400);
  --color-red-300: var(--red-300);
  --color-red-200: var(--red-200);
  --color-red-100: var(--red-100);

  /* Greyscale (Tons de Cinza) - Aliases para cores da paleta */
  --color-neutral-800: var(--neutral-800);
  --color-neutral-750: var(--neutral-750);
  --color-neutral-700: var(--neutral-700);
  --color-neutral-650: var(--neutral-650);
  --color-neutral-600: var(--neutral-600);
  --color-neutral-550: var(--neutral-550);
  --color-neutral-500: var(--neutral-500);
  --color-neutral-450: var(--neutral-450);
  --color-neutral-400: var(--neutral-400);
  --color-neutral-300: var(--neutral-300);
  --color-neutral-200: var(--neutral-200);
  --color-neutral-100: var(--neutral-100);

  /* ============================================================
     CORES SEMÂNTICAS - Light Mode
     ============================================================

     Use SEMPRE estas variáveis nos componentes.
     Elas garantem consistência e facilitam a manutenção.
     ============================================================ */

  --color-primary: var(--red-500);               /* Primário custom #970707 */
  --color-primary-hover: var(--red-400);         /* Hover #C90A0A */

  --color-success: var(--green-300);             /* Verde #519000 */
  --color-success-light: var(--green-100);       /* Fundo success light */
  --color-success-dark: var(--green-600);        /* Texto success dark */

  --color-warning: var(--yellow-300);            /* Amarelo #E9BD00 */
  --color-warning-light: var(--yellow-100);      /* Fundo warning light */
  --color-warning-dark: var(--yellow-600);       /* Texto warning dark */
  --color-warning-icon: var(--yellow-450);       /* Ícone warning */

  --color-danger: var(--red-400);                /* Vermelho #C90A0A */
  --color-danger-light: var(--red-100);          /* Fundo danger light */
  --color-danger-dark: var(--red-500);           /* Texto danger dark */

  --color-text-primary: var(--neutral-800);      /* Preto suave #12151F */
  --color-text-secondary: var(--neutral-600);    /* Cinza escuro #394360 */
  --color-text-muted: var(--neutral-500);        /* Cinza médio #7A839F */
  --color-text-light: var(--white);              /* Branco puro */

  --color-bg-primary: #E6E8EF;                   /* Fundo principal */
  --color-bg-secondary: var(--neutral-100);      /* Fundo secundário #F6F6F9 */
  --color-bg-tertiary: var(--neutral-300);       /* Fundo terciário #ECEDF2 */
  --color-bg-dark: var(--neutral-800);           /* Fundo escuro #12151F */
  --color-bg-tag: var(--neutral-450);            /* Fundo tags/badges #CDD1DB */

  --color-border: var(--neutral-400);            /* Borda padrão #CED3E2 */
  --color-border-light: var(--neutral-300);      /* Borda clara #ECEDF2 */
  --color-border-dark: var(--neutral-700);       /* Borda escura #1D2333 */
  --color-focus-ring: rgba(201, 10, 10, 0.15);   /* Destaque padrão de foco */
  --color-focus-ring-dark: rgba(201, 10, 10, 0.35); /* Destaque de foco no dark mode */

  /* ============================================================
     ESPAÇAMENTOS
     ============================================================ */

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 20px;
  --spacing-xl: 24px;
  --spacing-2xl: 32px;
  --spacing-3xl: 40px;
  --spacing-4xl: 48px;
  --spacing-5xl: 56px;
  --spacing-6xl: 64px;
  --spacing-7xl: 72px;
  --spacing-8xl: 80px;
  --spacing-9xl: 88px;
  --spacing-10xl: 96px;
  --spacing-11xl: 120px;

  /* ============================================================
     BORDER RADIUS
     ============================================================ */

  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-full: 9999px;

  /* ============================================================
     GRID
     ============================================================ */

  --grid-columns: 12;
  --grid-columns-form: 10;
  --grid-gutter: 32px;
  --grid-gutter-form: 56px;
  --grid-margin: 72px;
  --grid-max-width: 1440px;

  /* ============================================================
     SOMBRAS
     ============================================================ */

  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

  /* ============================================================
     TRANSIÇÕES
     ============================================================ */

  --transition-fast: 150ms ease-in-out;
  --transition-base: 200ms ease-in-out;
  --transition-slow: 300ms ease-in-out;

  /* ============================================================
     Z-INDEX
     ============================================================ */

  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
}

/* ============================================================
   DARK MODE - CORES SEMÂNTICAS
   ============================================================

   IMPORTANTE: As cores brutas (--blue-300, --red-400, etc) vêm de colors.css
   Aqui apenas sobrescrevemos as cores SEMÂNTICAS para dark mode
   ============================================================ */

.dark,
.dark-mode,
[data-theme="dark"] {
  /* Cores Semânticas (Dark Mode) */
  --color-success-light: var(--green-600);       /* Fundo success dark #1B2C2B */
  --color-success-dark: var(--green-200);        /* Texto success light #B3D684 */

  --color-warning-light: var(--yellow-600);      /* Fundo warning dark #242622 */
  --color-warning-dark: var(--yellow-450);       /* Texto warning light #EFD371 */

  --color-danger: var(--red-400);                /* Vermelho dark #CC2727 */
  --color-danger-light: var(--red-100);          /* Texto/ícones danger #FDEBEB */
  --color-danger-dark: var(--red-200);           /* Texto danger light #F49999 */

  --color-text-primary: var(--neutral-300);      /* Texto principal claro #E0E2EB - DARK MODE */
  --color-text-secondary: var(--neutral-450);    /* Texto secundário #A2A8B9 - DARK MODE */
  --color-text-muted: var(--neutral-500);        /* Texto muted #7A839F */
  --color-text-light: #F6F6F9;                   /* Texto ultra claro */

  --color-bg-primary: var(--neutral-800);        /* Fundo principal escuro #10141D - DARK MODE */
  --color-bg-secondary: var(--neutral-750);      /* Fundo secundário #141926 - DARK MODE */
  --color-bg-tertiary: var(--neutral-700);       /* Fundo terciário #1D2333 */
  --color-bg-dark: var(--neutral-800);           /* Fundo dark sidebar #10141D */
  --color-bg-tag: var(--neutral-700);            /* Fundo tags dark #1D2333 */

  --color-border: var(--neutral-600);            /* Borda padrão #2A2F41 */
  --color-border-light: var(--neutral-650);      /* Borda clara #212533 */
  --color-border-dark: var(--neutral-800);       /* Borda escura #10141D */
}

/* Preferência do sistema para dark mode */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Cores Semânticas (Dark Mode) */
    --color-success-light: var(--green-600);
    --color-success-dark: var(--green-200);

    --color-warning-light: var(--yellow-600);
    --color-warning-dark: var(--yellow-450);

    --color-danger: var(--red-400);
    --color-danger-light: var(--red-100);
    --color-danger-dark: var(--red-200);

    --color-text-primary: var(--neutral-300);
    --color-text-secondary: var(--neutral-450);
    --color-text-muted: var(--neutral-500);
    --color-text-light: #F6F6F9;

    --color-bg-primary: var(--neutral-800);
    --color-bg-secondary: var(--neutral-750);
    --color-bg-tertiary: var(--neutral-700);
    --color-bg-dark: var(--neutral-800);
    --color-bg-tag: var(--neutral-700);

    --color-border: var(--neutral-600);
    --color-border-light: var(--neutral-650);
    --color-border-dark: var(--neutral-800);
  }
}