/* ==========================================================================
   SGP — Design System · Camada 1: tokens (variáveis de design)
   Paleta herdada do legado (azul-ciano de destaque + barra lateral escura),
   modernizada: ciano mais profundo, cinzas neutros frios, roxo como apoio.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Cores de marca ---------------------------------------------------- */
  --sgp-ciano-50:  #e8f7fc;
  --sgp-ciano-100: #c6ecf7;
  --sgp-ciano-200: #93dcf0;
  --sgp-ciano-300: #55c7e6;
  --sgp-ciano-400: #26b2d8;
  --sgp-ciano-500: #0e97be;   /* cor de ação principal */
  --sgp-ciano-600: #0a7b9c;
  --sgp-ciano-700: #0a6280;
  --sgp-ciano-800: #0d4f66;
  --sgp-ciano-900: #0e4054;

  --sgp-roxo-100: #e6e3f7;
  --sgp-roxo-300: #a79ce0;
  --sgp-roxo-500: #6f5fc4;
  --sgp-roxo-700: #4c3f95;

  /* --- Neutros ----------------------------------------------------------- */
  --sgp-neutro-0:   #ffffff;
  --sgp-neutro-25:  #fbfcfd;
  --sgp-neutro-50:  #f5f7f9;
  --sgp-neutro-100: #eceff3;
  --sgp-neutro-200: #dfe4ea;
  --sgp-neutro-300: #c6ced8;
  --sgp-neutro-400: #9aa5b3;
  --sgp-neutro-500: #6f7b8b;
  --sgp-neutro-600: #55606f;
  --sgp-neutro-700: #3d4754;
  --sgp-neutro-800: #2a323d;
  --sgp-neutro-900: #1b222b;
  --sgp-neutro-950: #11161d;

  /* --- Semânticas -------------------------------------------------------- */
  --sgp-sucesso:  #17915f;
  --sgp-sucesso-suave: #e2f5ec;
  --sgp-atencao:  #b57a05;
  --sgp-atencao-suave: #fdf2d9;
  --sgp-perigo:   #c62f3d;
  --sgp-perigo-suave:  #fbe6e8;
  --sgp-info:     #1f6fb2;
  --sgp-info-suave:    #e4f0fa;

  /* --- Papéis (o que o CSS de componente realmente usa) ------------------ */
  --cor-fundo:            var(--sgp-neutro-50);
  --cor-fundo-elevado:    var(--sgp-neutro-0);
  --cor-fundo-afundado:   var(--sgp-neutro-100);
  --cor-fundo-sutil:      var(--sgp-neutro-25);
  --cor-borda:            var(--sgp-neutro-200);
  --cor-borda-forte:      var(--sgp-neutro-300);
  --cor-texto:            var(--sgp-neutro-900);
  --cor-texto-suave:      var(--sgp-neutro-600);
  --cor-texto-fraco:      var(--sgp-neutro-400);
  --cor-texto-invertido:  var(--sgp-neutro-0);

  --cor-acao:             var(--sgp-ciano-500);
  --cor-acao-forte:       var(--sgp-ciano-600);
  --cor-acao-suave:       var(--sgp-ciano-50);
  --cor-acao-contraste:   #ffffff;
  --cor-foco:             var(--sgp-ciano-400);

  --cor-barra-fundo:      var(--sgp-neutro-900);
  --cor-barra-fundo-topo: var(--sgp-neutro-950);
  --cor-barra-texto:      #cbd4de;
  --cor-barra-texto-ativo:#ffffff;
  --cor-barra-ativo:      rgba(255, 255, 255, .07);
  --cor-barra-borda:      rgba(255, 255, 255, .08);

  /* --- Tipografia -------------------------------------------------------- */
  --fonte-base: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --fonte-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Menlo, monospace;

  --texto-2xs: .6875rem;  /* 11px */
  --texto-xs:  .75rem;    /* 12px */
  --texto-sm:  .8125rem;  /* 13px */
  --texto-md:  .875rem;   /* 14px — corpo da interface */
  --texto-lg:  1rem;      /* 16px */
  --texto-xl:  1.125rem;  /* 18px */
  --texto-2xl: 1.375rem;  /* 22px */
  --texto-3xl: 1.75rem;   /* 28px */
  --texto-4xl: 2.25rem;   /* 36px */

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-forte: 700;

  --altura-apertada: 1.25;
  --altura-normal: 1.5;
  --altura-solta: 1.7;

  /* --- Espaçamento (escala de 4px) --------------------------------------- */
  --esp-0: 0;
  --esp-1: .25rem;
  --esp-2: .5rem;
  --esp-3: .75rem;
  --esp-4: 1rem;
  --esp-5: 1.25rem;
  --esp-6: 1.5rem;
  --esp-8: 2rem;
  --esp-10: 2.5rem;
  --esp-12: 3rem;
  --esp-16: 4rem;

  /* --- Raios ------------------------------------------------------------- */
  --raio-xs: 3px;
  --raio-sm: 5px;
  --raio-md: 8px;
  --raio-lg: 12px;
  --raio-xl: 18px;
  --raio-pilula: 999px;

  /* --- Sombras ----------------------------------------------------------- */
  --sombra-xs: 0 1px 2px rgba(17, 22, 29, .06);
  --sombra-sm: 0 1px 3px rgba(17, 22, 29, .08), 0 1px 2px rgba(17, 22, 29, .04);
  --sombra-md: 0 4px 12px rgba(17, 22, 29, .09), 0 1px 3px rgba(17, 22, 29, .05);
  --sombra-lg: 0 12px 32px rgba(17, 22, 29, .14), 0 2px 8px rgba(17, 22, 29, .06);
  --sombra-foco: 0 0 0 3px rgba(38, 178, 216, .32);

  /* --- Medidas de layout ------------------------------------------------- */
  --larg-barra-lateral: 248px;
  --larg-barra-lateral-recolhida: 68px;
  --alt-barra-topo: 60px;
  --larg-max-conteudo: 1440px;

  /* --- Movimento --------------------------------------------------------- */
  --transicao-rapida: 120ms cubic-bezier(.4, 0, .2, 1);
  --transicao-media: 200ms cubic-bezier(.4, 0, .2, 1);
  --transicao-lenta: 320ms cubic-bezier(.16, 1, .3, 1);

  /* --- Camadas ----------------------------------------------------------- */
  --z-barra-lateral: 40;
  --z-barra-topo: 30;
  --z-dropdown: 60;
  --z-vidro: 80;
  --z-modal: 90;
  --z-flash: 100;
}

/* --------------------------------------------------------------------------
   Tema escuro: preferência do sistema (sem data-theme="claro" explícito)
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="claro"]) {
    color-scheme: dark;

    --cor-fundo:            #10151b;
    --cor-fundo-elevado:    #171e26;
    --cor-fundo-afundado:   #0c1117;
    --cor-fundo-sutil:      #1c242e;
    --cor-borda:            #28323e;
    --cor-borda-forte:      #3a4655;
    --cor-texto:            #e7edf4;
    --cor-texto-suave:      #a2b0c0;
    --cor-texto-fraco:      #6c7c8e;
    --cor-texto-invertido:  #10151b;

    --cor-acao:             var(--sgp-ciano-400);
    --cor-acao-forte:       var(--sgp-ciano-300);
    --cor-acao-suave:       rgba(38, 178, 216, .14);
    --cor-acao-contraste:   #07222c;
    --cor-foco:             var(--sgp-ciano-300);

    --cor-barra-fundo:      #0c1117;
    --cor-barra-fundo-topo: #0c1117;
    --cor-barra-texto:      #93a3b5;
    --cor-barra-texto-ativo:#ffffff;
    --cor-barra-ativo:      rgba(255, 255, 255, .06);
    --cor-barra-borda:      #1e2833;

    --sgp-sucesso-suave: rgba(23, 145, 95, .16);
    --sgp-atencao-suave: rgba(181, 122, 5, .18);
    --sgp-perigo-suave:  rgba(198, 47, 61, .18);
    --sgp-info-suave:    rgba(31, 111, 178, .18);
    --sgp-sucesso: #35c98d;
    --sgp-atencao: #e0a428;
    --sgp-perigo:  #f2707c;
    --sgp-info:    #63aae8;

    --sombra-xs: 0 1px 2px rgba(0, 0, 0, .5);
    --sombra-sm: 0 1px 3px rgba(0, 0, 0, .55);
    --sombra-md: 0 4px 14px rgba(0, 0, 0, .55);
    --sombra-lg: 0 16px 40px rgba(0, 0, 0, .6);
    --sombra-foco: 0 0 0 3px rgba(85, 199, 230, .3);
  }
}

/* --------------------------------------------------------------------------
   Tema escuro: escolha explícita do usuário (vence o sistema nos dois sentidos)
   -------------------------------------------------------------------------- */
:root[data-theme="escuro"] {
  color-scheme: dark;

  --cor-fundo:            #10151b;
  --cor-fundo-elevado:    #171e26;
  --cor-fundo-afundado:   #0c1117;
  --cor-fundo-sutil:      #1c242e;
  --cor-borda:            #28323e;
  --cor-borda-forte:      #3a4655;
  --cor-texto:            #e7edf4;
  --cor-texto-suave:      #a2b0c0;
  --cor-texto-fraco:      #6c7c8e;
  --cor-texto-invertido:  #10151b;

  --cor-acao:             var(--sgp-ciano-400);
  --cor-acao-forte:       var(--sgp-ciano-300);
  --cor-acao-suave:       rgba(38, 178, 216, .14);
  --cor-acao-contraste:   #07222c;
  --cor-foco:             var(--sgp-ciano-300);

  --cor-barra-fundo:      #0c1117;
  --cor-barra-fundo-topo: #0c1117;
  --cor-barra-texto:      #93a3b5;
  --cor-barra-texto-ativo:#ffffff;
  --cor-barra-ativo:      rgba(255, 255, 255, .06);
  --cor-barra-borda:      #1e2833;

  --sgp-sucesso-suave: rgba(23, 145, 95, .16);
  --sgp-atencao-suave: rgba(181, 122, 5, .18);
  --sgp-perigo-suave:  rgba(198, 47, 61, .18);
  --sgp-info-suave:    rgba(31, 111, 178, .18);
  --sgp-sucesso: #35c98d;
  --sgp-atencao: #e0a428;
  --sgp-perigo:  #f2707c;
  --sgp-info:    #63aae8;

  --sombra-xs: 0 1px 2px rgba(0, 0, 0, .5);
  --sombra-sm: 0 1px 3px rgba(0, 0, 0, .55);
  --sombra-md: 0 4px 14px rgba(0, 0, 0, .55);
  --sombra-lg: 0 16px 40px rgba(0, 0, 0, .6);
  --sombra-foco: 0 0 0 3px rgba(85, 199, 230, .3);
}