/* ============================================================
   SOUL VAREJO — Colors & Typography Tokens v2
   Updated: May 2026 — TOTVS font system + new brand palette
   ============================================================ */

/* ── TOTVS Font Family ─────────────────────────────────────── */
@font-face { font-family: 'TOTVS'; src: url('fonts/TOTVS-ExtraLight.ttf') format('truetype'); font-weight: 200; font-style: normal; }
@font-face { font-family: 'TOTVS'; src: url('fonts/TOTVS-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'TOTVS'; src: url('fonts/TOTVS-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'TOTVS'; src: url('fonts/TOTVS-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; }
@font-face { font-family: 'TOTVS'; src: url('fonts/TOTVS-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'TOTVS'; src: url('fonts/TOTVS-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; }

/* ── Noto Serif (retained for editorial serif contexts) ────── */
@font-face { font-family: 'Noto Serif'; src: url('fonts/NotoSerif-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; }
@font-face { font-family: 'Noto Serif'; src: url('fonts/NotoSerif-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; }
@font-face { font-family: 'Noto Serif'; src: url('fonts/NotoSerif-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; }
@font-face { font-family: 'Noto Serif'; src: url('fonts/NotoSerif-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; }
@font-face { font-family: 'Noto Serif'; src: url('fonts/NotoSerif-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; }
@font-face { font-family: 'Noto Serif'; src: url('fonts/NotoSerif-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; }

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');

/* ── FONT NOTES ────────────────────────────────────────────────
   PRIMARY:  TOTVS — títulos, subtítulos, texto corrido, legendas, UI
   FALLBACK: Verdana — sistemas sem TOTVS instalado
   SERIF:    Noto Serif — contextos editoriais de longa leitura
   MONO:     JetBrains Mono — código, IDs, dados técnicos
   ──────────────────────────────────────────────────────────── */

:root {
  /* ══════════════════════════════════════════════
     BRAND COLORS — TOTVS/Soul Varejo v2
     Priority order: Azul Escuro > Azul > Roxo > Laranja (10-15% max)
  ══════════════════════════════════════════════ */

  /* ── CORE PALETTE ── */
  --color-azul-escuro:   #002233;  /* Azul Escuro — canvas principal, backgrounds */
  --color-azul:          #00DBFF;  /* Azul — destaque primário, CTAs, links */
  --color-roxo:          #A44DFF;  /* Roxo — destaque secundário */
  --color-laranja:       #FF8900;  /* Laranja — uso pontual 10–15% max */

  /* ── TRANSITÓRIAS (curta circulação, sem gradientes, sem protagonismo) ── */
  --color-violeta:       #5D00A5;  /* Violeta transitória */
  --color-roxo-escuro:   #411E5A;  /* Roxo Escuro transitório */

  /* ── NEUTRALS ── */
  --color-black:         #0A0A0A;
  --color-graphite:      #2A2A2A;
  --color-gray-dark:     #4F4F4F;
  --color-gray:          #888888;
  --color-gray-light:    #C4C4C4;
  --color-ice:           #F0F0F2;
  --color-white:         #FFFFFF;

  /* ── SEMANTIC SURFACE TOKENS ── */
  --bg-primary:          var(--color-azul-escuro);  /* #002233 — canvas escuro principal */
  --bg-secondary:        #00334d;                   /* azul escuro elevado */
  --bg-card:             #003348;                   /* card em fundo escuro */
  --bg-light:            var(--color-ice);
  --bg-white:            var(--color-white);

  --fg-primary:          var(--color-white);
  --fg-secondary:        rgba(255,255,255,0.75);
  --fg-muted:            rgba(255,255,255,0.45);
  --fg-on-light:         var(--color-azul-escuro);
  --fg-accent:           var(--color-azul);

  --accent-primary:      var(--color-azul);         /* #00DBFF — principal */
  --accent-secondary:    var(--color-roxo);          /* #A44DFF — secundário */
  --accent-warm:         var(--color-laranja);       /* #FF8900 — pontual */

  --border-subtle:       rgba(0, 219, 255, 0.15);
  --border-strong:       rgba(0, 219, 255, 0.4);

  /* ── GRADIENTS ── */
  /* Apenas os gradientes aprovados pela marca */
  --gradient-roxo-azul:      linear-gradient(135deg, #A44DFF 0%, #00DBFF 100%); /* @kind color */
  --gradient-azul-escuro:    linear-gradient(135deg, #00DBFF 0%, #002233 100%); /* @kind color */
  /* Uso em elementos visuais de suporte */
  --gradient-hero-dark:      linear-gradient(135deg, #002233 0%, #003d5c 60%, #00DBFF 100%); /* @kind color */
  --gradient-card-dark:      linear-gradient(135deg, #002233 0%, #00334d 100%); /* @kind color */

  /* ══════════════════════════════════════════════
     TYPOGRAPHY — TOTVS font system
     Use TOTVS for everything: titles, subtitles,
     body, captions, UI labels.
     Fallback: Verdana (pre-installed on most machines)
  ══════════════════════════════════════════════ */
  --font-primary:    'TOTVS', Verdana, sans-serif;   /* ALL UI usage */
  --font-serif:      'Noto Serif', Georgia, serif;   /* editorial long-form only */
  --font-mono:       'JetBrains Mono', 'Courier New', monospace;

  /* Convenience aliases */
  --font-display:    var(--font-primary);
  --font-body:       var(--font-primary);

  /* Type Scale */
  --text-xs:    0.75rem;    /* 12px — legendas */
  --text-sm:    0.875rem;   /* 14px — texto secundário */
  --text-base:  1rem;       /* 16px — texto corrido */
  --text-lg:    1.125rem;   /* 18px — texto de introdução */
  --text-xl:    1.25rem;    /* 20px — intertítulo */
  --text-2xl:   1.5rem;     /* 24px — subtítulo */
  --text-3xl:   2rem;       /* 32px — título médio */
  --text-4xl:   2.5rem;     /* 40px — título grande */
  --text-5xl:   3.5rem;     /* 56px — chamada de destaque */
  --text-6xl:   5rem;       /* 80px — display hero */

  /* Font Weights — TOTVS */
  --weight-extralight: 200;
  --weight-light:      300;
  --weight-regular:    400;
  --weight-semibold:   600;
  --weight-bold:       700;
  --weight-extrabold:  800;

  /* Line Heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* Letter Spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.05em;
  --tracking-wider:    0.1em;
  --tracking-widest:   0.2em;

  /* ── SPACING ── */
  --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;
  --space-20: 80px;
  --space-24: 96px;

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

  /* ── SHADOWS ── */
  --shadow-sm:         0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:         0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg:         0 8px 32px rgba(0,0,0,0.6);
  --shadow-glow-azul:  0 0 24px rgba(0,219,255,0.4);
  --shadow-glow-roxo:  0 0 24px rgba(164,77,255,0.4);
  --shadow-glow-warm:  0 0 24px rgba(255,137,0,0.35);
}

/* ── SEMANTIC TYPE CLASSES ── */
.soul-h1 {
  font-family: var(--font-primary);
  font-size: var(--text-5xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}
.soul-h2 {
  font-family: var(--font-primary);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}
.soul-h3 {
  font-family: var(--font-primary);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--fg-primary);
}
.soul-h4 {
  font-family: var(--font-primary);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-normal);
  color: var(--fg-primary);
}
.soul-label {
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-accent);
}
.soul-subtitle {
  font-family: var(--font-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--fg-secondary);
}
.soul-body {
  font-family: var(--font-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--fg-secondary);
}
.soul-body-sm {
  font-family: var(--font-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--fg-muted);
}
.soul-caption {
  font-family: var(--font-primary);
  font-size: var(--text-xs);
  font-weight: var(--weight-light);
  color: var(--fg-muted);
}
.soul-code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--accent-primary);
}
.soul-wordmark {
  font-family: var(--font-primary);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}