/* =============================================================
   LIONS INTELLIGENCE — design tokens oficiais
   v2.0 · padrao 360 · vigente desde 2026-07-25
   fonte unica da verdade cromatica de todo o ecossistema lions.
   qualquer cor que nao esteja aqui nao e cor da lions.
   ============================================================= */

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

:root {

  /* ============ CORES — paleta primaria ============ */

  /* BLUE — primaria. azul da bandeira de israel. CTA, links, foco, marca. */
  --blue-50:  #F0F4FF;
  --blue-100: #DBE6FF;
  --blue-200: #B8CDFF;
  --blue-300: #85A9FF;
  --blue-400: #2969FF;
  --blue-500: #0038B8;  /* ← BRAND · azul oficial lions */
  --blue-600: #002F9E;
  --blue-700: #002885;
  --blue-800: #00206B;
  --blue-900: #001852;

  /* WHITE — branco da bandeira. fundo principal do sistema. */
  --white: #FFFFFF;     /* ← BRAND · background principal */

  /* GREEN — sucesso, status conectado, selo whatsapp. nao e mais CTA. */
  --green-50:  #F0FDF4;
  --green-100: #DCFCE7;
  --green-200: #BBF7D0;
  --green-300: #86EFAC;
  --green-400: #4ADE80;
  --green-500: #25D366;  /* ← BRAND secundaria */
  --green-600: #1FAE54;
  --green-700: #128C7E;
  --green-800: #166534;
  --green-900: #14532D;

  /* YELLOW — destaque. marcacao, numero importante. use raro. */
  --yellow-50:  #FEFCE8;
  --yellow-100: #FEF9C3;
  --yellow-200: #FEF08A;
  --yellow-300: #FDE047;
  --yellow-400: #FACC15;
  --yellow-500: #F5C518;  /* ← BRAND acento */
  --yellow-600: #CA8A04;
  --yellow-700: #A16207;
  --yellow-800: #854D0E;
  --yellow-900: #713F12;

  /* INK — escala neutra. texto, bordas, fundos escuros. */
  --ink-50:  #F8F9FA;
  --ink-100: #F1F3F4;
  --ink-200: #E2E4E7;
  --ink-300: #C8CCD0;
  --ink-400: #9CA1A6;
  --ink-500: #6B7280;
  --ink-600: #4B5359;
  --ink-700: #2A3138;  /* texto secundario */
  --ink-800: #1F252B;
  --ink-900: #161B20;
  --ink-950: #0F1419;  /* ← BRAND · tinta principal */

  /* PAPER — neutros quentes. fundo secundario, cards alternados, impresso. */
  --paper:      #F7F5F0;
  --paper-soft: #EFEBE0;
  --paper-line: #E5E1D8;

  /* NAVY — apoio. contraste em ilustracao e fundo escuro alternativo. */
  --navy-500: #1A2638;
  --navy-700: #0F1828;

  /* DANGER — erro, destrutivo. primitivo, nao hex solto na semantica. */
  --danger: #DC2626;

  /* GOLD APOSENTADO — nao e token de ui e nao e mais cor do simbolo.
     o leao virou branco e azul em 25.07.2026. este valor fica so como registro historico.
     proibido usar em botao, fundo, texto ou borda. */
  --gold-aposentado: #C9A84C;  /* nao usar em lugar nenhum */

  /* ============ ALIASES SEMANTICOS ============
     em codigo novo use SEMPRE estes, nunca o hex cru. */

  --color-bg:           var(--white);
  --color-bg-soft:      var(--paper);
  --color-bg-card:      var(--white);
  --color-bg-inverse:   var(--ink-950);

  --color-text:         var(--ink-950);
  --color-text-soft:    var(--ink-700);
  --color-text-muted:   var(--ink-500);
  --color-text-inverse: var(--white);

  --color-border:        var(--paper-line);
  --color-border-strong: var(--ink-950);

  --color-primary:       var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-primary-soft:  var(--blue-50);
  --color-on-primary:    var(--white);

  --color-accent:       var(--yellow-500);
  --color-success:      var(--green-500);
  --color-warning:      var(--yellow-500);
  --color-danger:       var(--danger);
  --color-info:         var(--blue-400);

  --color-link:         var(--blue-600);
  --color-focus-ring:   rgba(0, 56, 184, 0.30);

  /* ============ TIPOGRAFIA ============
     inalterada em relacao a v1 lions — este documento troca cor, nao fonte. */

  --font-display: 'Poppins', 'Inter Tight', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --text-display-1: clamp(40px, 6.2vw, 76px);
  --text-display-2: clamp(32px, 4.5vw, 56px);
  --text-display-3: clamp(22px, 2.5vw, 30px);
  --text-h1:        clamp(28px, 3vw, 32px);
  --text-h2:        24px;
  --text-h3:        19px;
  --text-lead:      19px;
  --text-body:      17px;
  --text-small:     15px;
  --text-caption:   13px;
  --text-micro:     11px;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;
  --weight-black:   800;

  --leading-tight:   1.02;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-wider:  0.08em;

  /* ============ SPACING — escala 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;  --space-20: 80px;  --space-24: 100px;
  --space-32: 128px;

  /* ============ BORDER RADIUS ============ */

  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-pill: 999px;

  /* ============ BORDERS ============ */

  --border-thin:   1px;
  --border-medium: 1.5px;
  --border-strong: 2px;

  /* ============ SHADOWS ============ */

  --shadow-sm:    0 1px 2px rgba(15, 20, 25, 0.04);
  --shadow-md:    0 4px 12px rgba(15, 20, 25, 0.08);
  --shadow-lg:    0 30px 60px -30px rgba(15, 20, 25, 0.18);
  --shadow-focus: 0 0 0 3px var(--color-focus-ring);

  /* ============ TRANSITIONS ============ */

  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* ============ Z-INDEX ============ */

  --z-base: 1;  --z-dropdown: 10;  --z-sticky: 100;  --z-modal: 1000;  --z-toast: 2000;
}

/* ============ RESET BASICO ============ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============ UTILITARIOS ============ */

.display { font-family: var(--font-display); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); }
.body    { font-family: var(--font-body); }
.mono    { font-family: var(--font-mono); }

/* card sobre fundo branco PRECISA de borda — fundo e card sao ambos brancos.
   esta e a armadilha numero 1 da v2. */
.card {
  background: var(--color-bg-card);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.btn-primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border: none;
  border-radius: var(--radius-pill);
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  cursor: pointer;
  transition: background var(--transition-base);
}
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-primary:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

/* pele 360 explicita — mesmo que :root. nao usar prefers-color-scheme:
   noite da casa e tekhelet (data-tema), nao ink invertido. */
html[data-tema="360"] {
  color-scheme: light;
}