/*
 * S.I.N. Design System - Variables
 * Guia de Interface S.I.N.
 * Soluções + Inovações = Novos Sorrisos
 */

:root {
    /* ========================================
       CORES INSTITUCIONAIS S.I.N.
       ======================================== */

    /* Vermelho S.I.N. - Relacionamento */
    --sin-vermelho: #C20019;
    --sin-vermelho-rgb: 194, 0, 25;
    --sin-vermelho-hover: #a30015;
    --sin-vermelho-light: rgba(194, 0, 25, 0.1);

    /* Laranja S.I.N. - Comunicação Interna */
    --sin-laranja: #ED8C00;
    --sin-laranja-rgb: 237, 140, 0;
    --sin-laranja-hover: #d47d00;
    --sin-laranja-light: rgba(237, 140, 0, 0.1);

    /* Azul S.I.N. - Científico */
    --sin-azul: #00568C;
    --sin-azul-rgb: 0, 86, 140;
    --sin-azul-hover: #004570;
    --sin-azul-light: rgba(0, 86, 140, 0.1);

    /* Cinza Claro S.I.N. */
    --sin-cinza-claro: #D8D4D7;
    --sin-cinza-claro-rgb: 216, 212, 215;

    /* Cinza Chumbo S.I.N. */
    --sin-cinza-chumbo: #545860;
    --sin-cinza-chumbo-rgb: 84, 88, 96;
    --sin-cinza-chumbo-hover: #43464d;
    --sin-cinza-chumbo-light: rgba(84, 88, 96, 0.1);

    /* ========================================
       CORES SEMAFÓRICAS (UI Status)
       ======================================== */

    /* Verde - Sucesso, Concluído, Ativo, Positivo */
    --sin-sucesso: #008000;
    --sin-sucesso-rgb: 0, 128, 0;
    --sin-sucesso-light: rgba(0, 128, 0, 0.1);
    --sin-sucesso-bg: #e6f4e6;

    /* Amarelo/Âmbar - Atenção, Aviso, Pendente, Cuidado */
    --sin-aviso: #FFC000;
    --sin-aviso-rgb: 255, 192, 0;
    --sin-aviso-light: rgba(255, 192, 0, 0.15);
    --sin-aviso-bg: #fff8e6;

    /* Vermelho - Erro, Falha, Perigo, Rejeição, Parada */
    --sin-erro: #FF0000;
    --sin-erro-rgb: 255, 0, 0;
    --sin-erro-light: rgba(255, 0, 0, 0.1);
    --sin-erro-bg: #ffe6e6;

    /* ========================================
       TIPOGRAFIA
       ======================================== */

    /* Fontes (Nunito Sans = similar Aller, Work Sans = similar Brandon Grotesque) */
    --font-primary: 'Nunito Sans', 'Trebuchet MS', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-secondary: 'Work Sans', 'Trebuchet MS', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-system: 'Trebuchet MS', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Tamanhos de Fonte - Desktop (baseado no guia, adaptado para web) */
    --font-size-h1: 3.5rem;    /* ~56px (guia: 82pt adaptado) */
    --font-size-h2: 2.5rem;    /* ~40px (guia: 52pt adaptado) */
    --font-size-h3: 2rem;      /* ~32px (guia: 41pt adaptado) */
    --font-size-h4: 1.5rem;    /* ~24px (guia: 29pt adaptado) */
    --font-size-h5: 1.25rem;   /* 20px (guia: 20pt) */
    --font-size-h6: 1.0625rem; /* 17px (guia: 17pt) */
    --font-size-subtitle: 1rem; /* 16px (guia: 16pt) */
    --font-size-body: 0.875rem; /* 14px (guia: 14pt) */
    --font-size-body-2: 0.8125rem; /* 13px (guia: 13pt) */
    --font-size-button: 0.8125rem; /* 13px (guia: 13pt) */
    --font-size-small: 0.75rem; /* 12px */

    /* Pesos de Fonte */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Altura de Linha */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.6;
    --line-height-loose: 1.8;

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

    --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 */

    /* ========================================
       BORDAS E SOMBRAS
       ======================================== */

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 50px;
    --radius-circle: 50%;

    /* Sombras */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

    /* Bordas */
    --border-width: 1px;
    --border-width-thick: 2px;
    --border-color: var(--sin-cinza-claro);
    --border-color-dark: var(--sin-cinza-chumbo);

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

    --transition-fast: 150ms ease;
    --transition-normal: 300ms ease;
    --transition-slow: 500ms ease;

    /* ========================================
       CORES NEUTRAS E FUNDOS
       ======================================== */

    --color-white: #FFFFFF;
    --color-black: #000000;
    --color-text-primary: var(--sin-cinza-chumbo);
    --color-text-secondary: #6c757d;
    --color-text-muted: #9ca3af;
    --color-bg-primary: var(--color-white);
    --color-bg-secondary: #f8f9fa;
    --color-bg-tertiary: var(--sin-cinza-claro);

    /* ========================================
       TAMANHOS DE BOTÕES
       ======================================== */

    /* Large */
    --btn-lg-padding-y: 0.875rem;  /* 14px */
    --btn-lg-padding-x: 1.5rem;    /* 24px */
    --btn-lg-font-size: 1rem;      /* 16px */

    /* Medium (default) */
    --btn-md-padding-y: 0.625rem;  /* 10px */
    --btn-md-padding-x: 1.25rem;   /* 20px */
    --btn-md-font-size: 0.875rem;  /* 14px */

    /* Small */
    --btn-sm-padding-y: 0.5rem;    /* 8px */
    --btn-sm-padding-x: 1rem;      /* 16px */
    --btn-sm-font-size: 0.8125rem; /* 13px */

    /* Extra Small */
    --btn-xs-padding-y: 0.375rem;  /* 6px */
    --btn-xs-padding-x: 0.75rem;   /* 12px */
    --btn-xs-font-size: 0.75rem;   /* 12px */
}

/* ========================================
   MEDIA QUERIES - Tamanhos Responsivos
   ======================================== */

/* Tablets */
@media (max-width: 992px) {
    :root {
        --font-size-h1: 2.5rem;
        --font-size-h2: 2rem;
        --font-size-h3: 1.75rem;
        --font-size-h4: 1.375rem;
    }
}

/* Smartphones */
@media (max-width: 576px) {
    :root {
        --font-size-h1: 1.75rem;
        --font-size-h2: 1.5rem;
        --font-size-h3: 1.375rem;
        --font-size-h4: 1.25rem;
        --font-size-h5: 1.125rem;
        --font-size-h6: 1rem;

        --btn-lg-padding-y: 0.75rem;
        --btn-lg-padding-x: 1.25rem;
    }
}