/* tokens.css — SST Ágil · Design System v0.2
   Fonte da verdade: manual-identidade-sst-agil-v0.2.html §2.1
   Zero hex hardcoded fora deste arquivo — sempre var(--token). */

:root {
  --brand-green:   #4EA664;
  --brand-green-2: #3E8A53;
  --green-soft:    #78BF9E;
  --green-tint:    #A9D9C2;
  --brand-blue:    #1570A4;
  --ok:            #1B7A3A;
  --warn:          #B7791F;
  --danger:        #B12A2A;
  --delta-up:      var(--ok);
  --delta-dn:      var(--danger);
  --bg:            #FFFFFF;
  --surface:       #F7F7F7;
  --line:          #E1E1E1;
  --line-2:        #C0C0C0;
  --fg:            #1A1A1A;
  --fg-dim:        #555555;
  --fg-faint:      #6E6E6E;
  --accent:        var(--brand-green);
  --accent-hv:     var(--brand-green-2);
  --ff-title:      'Aptos Display', 'Archivo', Verdana, sans-serif;
  --ff-body:       'Inter', Helvetica, Arial, sans-serif;
  --ff-mono:       'JetBrains Mono', Consolas, monospace;
  --radius:        8px;
  --header-h:      64px;
  --sidebar-w:     280px;

  /* ── Camada estrutural — Design System v0.3 (Redesign de layout) ──
     Fonte da verdade: manual-identidade-sst-agil-v0.3.html §2.4/§2.5 */

  /* Breakpoints (mobile-first, usar em @media) */
  --bp-mobile:    640px;
  --bp-tablet:   1024px;
  --bp-desktop:  1440px;
  --bp-wide:     1920px;

  /* Escala de espaçamento (base 4px) */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Containers */
  --content-pad-x:        var(--space-8);    /* lateral em tablet+ */
  --content-pad-x-wide:   var(--space-12);   /* lateral em wide */
  --card-max-w:           960px;             /* cartões single-column */
  --card-max-w-wide:      1180px;            /* cartões single-column em wide */
  --aux-panel-w:          280px;             /* painel direito em telas wide */

  /* Elevações (4 níveis) */
  --shadow-0: none;
  --shadow-1: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06);
  --shadow-2: 0 2px 4px rgba(15,23,42,.06), 0 4px 8px rgba(15,23,42,.08);
  --shadow-3: 0 4px 12px rgba(15,23,42,.10), 0 8px 24px rgba(15,23,42,.08);
  --shadow-focus: 0 0 0 3px rgba(78,166,100,.22); /* brand-green @ 22% */

  /* Animação */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:     120ms;
  --dur-base:     200ms;
  --dur-slow:     320ms;

  /* Z-index */
  --z-base:      0;
  --z-sticky:   10;
  --z-overlay:  20;
  --z-modal:    30;
  --z-toast:    40;
}