/* ══════════════════════════════════════════════
   layout.tokens.css — v3.1
   Saulo B_ Design System
   Fonte única da verdade para todos os tokens.
   Importar em qualquer projeto que use o DS.
══════════════════════════════════════════════ */
:root {

  /* ── Cor — Primária ── */
  --blue:           #175CE5;
  --blue-hover:     #1450cc;
  --blue-deep:      #0A3AAF;
  --blue-light:     #6B9FFF;
  --blue-lighter:   #A8C4FF;
  --blue-lightest:  #D8E6FF;
  --blue-ghost:     rgba(23,92,229,.08);
  --blue-border:    rgba(23,92,229,.2);
  --blue-ring:      rgba(23,92,229,.5);

  /* ── Cor — Neutros ── */
  --black:          #0A0B0D;
  --white:          #FFFFFF;
  --text-default:   #1A1D22;   /* Títulos, corpo principal */
  --text-secondary: #565B66;   /* Corpo de suporte, descrições */
  --text-subtle:    #757A85;   /* Labels, metadados, captions, nav inativo */
  --text-disabled:  #9EA3AD;

  /* ── Cor — Superfícies ── */
  --surface-base:   #F9F9F9;
  --surface-raised: #F4F4F6;
  --surface-border: #E4E4E8;

  /* ── Cor — Semântica ── */
  --green:          #1A7F4B;
  --green-bg:       rgba(26,127,75,.07);
  --green-border:   rgba(26,127,75,.2);
  --amber:          #B45309;
  --amber-bg:       rgba(180,83,9,.07);
  --amber-border:   rgba(180,83,9,.22);
  --red:            #C0392B;
  --red-bg:         rgba(192,57,43,.07);
  --red-border:     rgba(192,57,43,.2);

  /* ── Tipografia ── */
  --font:           'Space Grotesk', sans-serif;
  --weight-400:     400;
  --weight-500:     500;
  --weight-600:     600;
  --weight-700:     700;

  /* Line-heights */
  --lh-hero:        1.1;    /* Hero h1 */
  --lh-heading:     1.15;   /* Section headings */
  --lh-snug:        1.4;    /* Subtítulos, labels grandes */
  --lh-body:        1.72;   /* Corpo principal */
  --lh-relaxed:     1.65;   /* Body secundário, descrições */
  --lh-compact:     1.5;    /* Listas, nav, captions */

  /* ── Bordas ── */
  --r-sm:           4px;
  --r-md:           8px;
  --r-lg:           12px;
  --r-xl:           16px;
  --r-2xl:          24px;
  --r-full:         9999px;

  /* ── Sombras ── */
  --sh-sm:          0 1px 4px rgba(0,0,0,.06);
  --sh-md:          0 4px 16px rgba(0,0,0,.08);
  --sh-lg:          0 12px 40px rgba(0,0,0,.12);
  --sh-xl:          0 24px 64px rgba(0,0,0,.16);

  /* ── Z-index ── */
  --z-base:         0;
  --z-raised:       100;
  --z-dropdown:     200;
  --z-sticky:       900;
  --z-nav:          1000;
  --z-drawer:       1001;
  --z-tooltip:      1100;
  --z-modal:        2000;

  /* ── Motion ── */
  --ease-out:       cubic-bezier(.25,.46,.45,.94);
  --ease-spring:    cubic-bezier(.34,1.56,.64,1);
  --ease-in-out:    cubic-bezier(.4,0,.2,1);
  --dur-fast:       150ms;
  --dur-base:       250ms;
  --dur-slow:       400ms;
  --dur-xslow:      600ms;

  /* ── Spacing — Containers ── */
  --container-lg:   1200px;
  --container-md:   1024px;
  --container-sm:   840px;
  --space-desktop:  32px;
  --space-tablet:   24px;
  --space-mobile:   16px;

  /* ── Spacing — Section ── */
  --section-v:      88px;   /* desktop padrão */
  --section-v-sm:   64px;   /* compactas */
  --section-v-tab:  48px;   /* tablet ≤1023px */
  --section-v-mob:  40px;   /* mobile ≤767px */

  /* ── Spacing — Componentes ── */
  --gap-xs:         4px;
  --gap-sm:         8px;
  --gap-sm-plus:    12px;
  --gap-md:         16px;
  --gap-lg:         24px;
  --gap-md-plus:    32px;
  --gap-xl:         40px;
  --gap-2xl:        48px;
  --gap-3xl:        64px;

  /* ── Visualização — escala de nível ── */
  --viz-level-5:    #0A3AAF;   /* Expert        = --blue-deep     */
  --viz-level-4:    #175CE5;   /* Domínio       = --blue          */
  --viz-level-3:    #6B9FFF;   /* Proficiente   = --blue-light    */
  --viz-level-2:    #A8C4FF;   /* Desenvolvendo = --blue-lighter  */
  --viz-level-1:    #D8E6FF;   /* Iniciado      = --blue-lightest */
}