/* ═══════════════════════════════════════════════════════════════
   tokens.css — Design tokens globais
   ───────────────────────────────────────────────────────────────
   Fonte única de verdade para todas as variáveis CSS do projeto.
   Carregue este arquivo ANTES de qualquer outro CSS customizado.

   O bloco :root da empresa (gerado pelo _Layout*.cshtml) sobrescreve
   as cores abaixo com os valores configurados em LayoutEmpresaViewModel.Tema,
   permitindo tematização por empresa sem tocar nenhum CSS estático.

   Estrutura de carregamento:
     1. tokens.css          ← defaults (este arquivo)
     2. <style>:root{}</style>  ← overrides da empresa (gerado pelo layout)
     3. portfolio.css / crud.css / artigo.css / ...  ← consomem as variáveis
═══════════════════════════════════════════════════════════════ */

:root {

    /* ── Paleta principal ──────────────────────────────────────── */
    --green-deep:  #0a5c33;
    --green-mid:   #0f7a45;
    --green-light: #19a85e;
    --green-muted: #e8f5ee;
    --gold:        #d4a017;
    --gold-light:  #fdf3d0;

    /* ── Texto ─────────────────────────────────────────────────── */
    --text-dark:  #1a2a1e;
    --text-mid:   #3d5a45;
    --text-muted: #6b8573;

    /* ── Superfícies ───────────────────────────────────────────── */
    --bg:     #f3f7f4;
    --border: #d0e4d8;
    --white:  #ffffff;

    /* ── Tipografia ────────────────────────────────────────────── */
    --font-head: 'Sora', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* ── Aliases: crud.css ─────────────────────────────────────── */
    /* Permitem que crud.css use --c-* e ainda reaja ao tema da empresa */
    --c-green:       var(--green-deep);
    --c-green-mid:   var(--green-mid);
    --c-green-light: var(--green-light);
    --c-green-muted: var(--green-muted);
    --c-gold:        var(--gold);
    --c-gold-light:  var(--gold-light);
    --c-text:        var(--text-dark);
    --c-text-mid:    var(--text-mid);
    --c-text-muted:  var(--text-muted);
    --c-bg:          var(--bg);
    --c-border:      var(--border);
    --c-white:       var(--white);

    /* ── Aliases: login.css ────────────────────────────────────── */
    --green: var(--green-deep);

    /* ── RGB components — permitem rgba() temático ─────────────── */
    /* uso: rgba(var(--primary-rgb), .12)                          */
    --primary-rgb:       10, 92, 51;   /* --green-deep como RGB   */
    --primary-mid-rgb:   15, 122, 69;  /* --green-mid como RGB    */
    --primary-light-rgb: 25, 168, 94;  /* --green-light como RGB  */

    /* ── Stops de gradiente: header / topbar ───────────────────── */
    --header-grad-mid: #0d7040;
    --header-grad-end: #11854d;

    /* ── Gradiente escuro: spotlight / search band ──────────────── */
    --dark-bg-1: #0a3d22;   /* start / base dos fundos escuros    */
    --dark-bg-2: #0f5a32;   /* mid (spotlight)                    */
    --dark-bg-3: #083319;   /* end (search band)                  */

    /* ── Hero de projeto / artigo (gradiente muito escuro) ──────── */
    --hero-grad-start: #062718;
    --art-hero-deep:   #062a14;

    /* ── Accent bright (pub status, focus rings) ────────────────── */
    --accent-bright: #3dd68c;

    /* ── Border muted (alerts, blockquotes) ─────────────────────── */
    --border-muted: #b3ddc5;

    /* ── Botão XLSX (dados abertos) ─────────────────────────────── */
    --xlsx-bg:       #1e7e45;
    --xlsx-bg-hover: #18693a;
    --xlsx-rgb:      30, 126, 69;

    /* ── Aliases adicionais ─────────────────────────────────────── */
    --green-dark: var(--green-deep);   /* alias: processo.css      */

    /* ── Layout CRUD ───────────────────────────────────────────── */
    --sidebar-w:  240px;
    --topbar-h:   60px;
    --radius:     10px;
    --radius-lg:  14px;
    --shadow-sm:  0 1px 4px rgba(0,0,0,.07);
    --shadow-md:  0 4px 16px rgba(var(--primary-rgb),.10);
    --shadow-lg:  0 8px 32px rgba(var(--primary-rgb),.14);

    /* ── Layout artigo ─────────────────────────────────────────── */
    --col-w:  720px;
    --side-w: 260px;
    --gap:    48px;
}