/* ==========================================================================
   Mellow Sky — Design Tokens
   Tema padrão do E-commerce SaaS Template
   Referência: docs/DESIGN_SYSTEM.md
   ========================================================================== */

:root {

    /* ------------------------------------------------------------------
       TEXTO
    ------------------------------------------------------------------ */
    --text-primary:    #1A2B3C;   /* Títulos, texto principal */
    --text-secondary:  #5A6B7C;   /* Legendas, metadados, texto de apoio */
    --text-muted:      #94A3B8;   /* Placeholders, hints, disabled */
    --text-on-dark:    #FFFFFF;   /* Texto sobre fundos escuros */
    --text-on-brand:   #FFFFFF;   /* Texto sobre action-primary / action-strong */

    /* ------------------------------------------------------------------
       SUPERFÍCIES
    ------------------------------------------------------------------ */
    --surface-page:     #FAFBFC;  /* Fundo principal da página */
    --surface-section:  #F1F5F9;  /* Seções alternadas, tabela thead */
    --surface-card:     #FFFFFF;  /* Cards, inputs, dropdowns */
    --surface-subtle:   #E8F0F7;  /* Destaques leves, hover de linhas */
    --surface-elevated: #FFFFFF;  /* Modais, popovers (com shadow-lg) */

    /* ------------------------------------------------------------------
       AÇÕES
       action-primary, surface-page e text-primary são sobrescritos
       em head.php com as cores do tenant (cor_primaria, cor_fundo, cor_texto).
    ------------------------------------------------------------------ */
    --action-primary:        #7BB7D9;  /* Botões principais, links */
    --action-primary-hover:  #5DA2C9;  /* Hover de action-primary */
    --action-primary-active: #4A8EB5;  /* Pressed de action-primary */
    --action-secondary:      #FFFFFF;  /* Botões secundários (com borda) */
    --action-strong:         #1E3A5F;  /* CTAs de alta conversão */
    --action-strong-hover:   #152B47;  /* Hover de action-strong */

    /* ------------------------------------------------------------------
       BORDAS
    ------------------------------------------------------------------ */
    --border-default: #E2E8EF;   /* Bordas padrão de inputs e cards */
    --border-subtle:  #F1F5F9;   /* Bordas muito sutis, divisores */
    --border-focus:   #7BB7D9;   /* Focus ring (sincronizado com action-primary) */

    /* ------------------------------------------------------------------
       STATUS
    ------------------------------------------------------------------ */
    --status-success: #7FB69B;   /* Sucesso, confirmação (verde sálvia) */
    --status-warning: #E8B86C;   /* Alerta, atenção (âmbar suave) */
    --status-error:   #D98880;   /* Erro, perigo (coral suave) */

}