/* 📖 tokens.css — Variáveis globais do design system Hubit Site
   ⚠️  Alterar? Este arquivo é importado por TODOS os outros CSS.
       Nunca remover uma variável sem verificar todos os usos. */

:root {

  /* ─────────────────────────────────────────
     PALETA DE CORES
     ───────────────────────────────────────── */

  /* Primária — Azul Hubit */
  --color-primary-50:  #eef4fb;
  --color-primary-100: #d6e6f5;
  --color-primary-200: #aecce9;
  --color-primary-300: #7da9d4;  /* ← cor assinatura */
  --color-primary-400: #5b8ec5;
  --color-primary-500: #3b72b5;
  --color-primary-600: #2c5a96;
  --color-primary-700: #1f4278;
  --color-primary-800: #142c55;
  --color-primary-900: #0a1830;

  /* Superfícies — tema escuro */
  --color-bg-base:    #0d1117;   /* fundo principal */
  --color-bg-raised:  #161b22;   /* cards, painéis */
  --color-bg-overlay: #1c2333;   /* modais, tooltips */
  --color-bg-subtle:  #21262d;   /* hover, destaque leve */
  --color-bg-muted:   #30363d;   /* bordas, divisores */

  /* Texto */
  --color-text-primary:   #f0f6fc;   /* títulos, destaque */
  --color-text-secondary: #8b949e;   /* corpo, legendas */
  --color-text-muted:     #484f58;   /* placeholders, desabilitados */
  --color-text-inverse:   #0d1117;   /* texto sobre fundo claro */

  /* Semânticas */
  --color-success:  #3fb950;
  --color-warning:  #d29922;
  --color-error:    #f85149;
  --color-info:     #58a6ff;

  /* Accent — para CTAs e destaques */
  --color-accent:        #7da9d4;
  --color-accent-glow:   rgba(125, 169, 212, 0.25);
  --color-accent-subtle: rgba(125, 169, 212, 0.10);

  /* Gradientes */
  --gradient-hero:     linear-gradient(135deg, #0d1117 0%, #0f1923 50%, #0d1117 100%);
  --gradient-card:     linear-gradient(145deg, #161b22, #1c2333);
  --gradient-accent:   linear-gradient(135deg, #7da9d4, #5b8ec5);
  --gradient-glow:     radial-gradient(ellipse at center, rgba(125,169,212,0.15) 0%, transparent 70%);
  --gradient-problem:  linear-gradient(180deg, #0d1117 0%, #0f1118 60%, #0d1117 100%);
  --gradient-cta:      linear-gradient(135deg, #142c55 0%, #0d1117 100%);

  /* ─────────────────────────────────────────
     TIPOGRAFIA
     ───────────────────────────────────────── */

  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Escala de tamanhos */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-7xl:  4.5rem;     /* 72px */

  /* Pesos */
  --font-normal:   400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;
  --font-black:    900;

  /* Line heights */
  --leading-tight:  1.2;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.625;
  --leading-loose:  2;

  /* Letter spacing */
  --tracking-tight:  -0.025em;
  --tracking-normal: 0em;
  --tracking-wide:   0.025em;
  --tracking-wider:  0.05em;
  --tracking-widest: 0.1em;

  /* ─────────────────────────────────────────
     ESPAÇAMENTO (escala base 4px)
     ───────────────────────────────────────── */

  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */
  --space-40: 10rem;     /* 160px */

  /* Section padding */
  --section-py-sm: var(--space-16);
  --section-py:    var(--space-24);
  --section-py-lg: var(--space-32);

  /* ─────────────────────────────────────────
     BORDAS E RAIOS
     ───────────────────────────────────────── */

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

  --border-subtle: 1px solid rgba(125, 169, 212, 0.10);
  --border-muted:  1px solid rgba(255, 255, 255, 0.06);
  --border-accent: 1px solid rgba(125, 169, 212, 0.30);

  /* ─────────────────────────────────────────
     SOMBRAS
     ───────────────────────────────────────── */

  --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 30px rgba(0,0,0,0.6);
  --shadow-xl:   0 20px 60px rgba(0,0,0,0.7);
  --shadow-glow: 0 0 30px rgba(125, 169, 212, 0.20);
  --shadow-glow-lg: 0 0 60px rgba(125, 169, 212, 0.25);

  /* ─────────────────────────────────────────
     Z-INDEX
     ───────────────────────────────────────── */

  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;
  --z-top:      999;

  /* ─────────────────────────────────────────
     TRANSIÇÕES E EASING
     ───────────────────────────────────────── */

  --ease-out:      cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-in:       cubic-bezier(0.4, 0.0, 1, 1);
  --ease-in-out:   cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:   cubic-bezier(0.25, 0.46, 0.45, 0.94);

  --duration-fast:   150ms;
  --duration-normal: 250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  --transition-base:    all var(--duration-normal) var(--ease-out);
  --transition-fast:    all var(--duration-fast) var(--ease-out);
  --transition-spring:  all var(--duration-slow) var(--ease-spring);

  /* ─────────────────────────────────────────
     LAYOUT
     ───────────────────────────────────────── */

  --max-width-content: 1200px;
  --max-width-text:    720px;
  --max-width-narrow:  540px;

  --nav-height: 64px;

  /* Breakpoints (para referência — usar @media queries no CSS) */
  /* --bp-sm: 640px  */
  /* --bp-md: 768px  */
  /* --bp-lg: 1024px */
  /* --bp-xl: 1280px */
  /* --bp-2xl: 1536px */
}

/* ─── Responsividade do container para telas largas / 4K ─── */

@media (min-width: 1440px) {
  :root { --max-width-content: 1380px; }
}

@media (min-width: 1920px) {
  :root { --max-width-content: 1680px; }
}

@media (min-width: 2560px) {
  :root { --max-width-content: 2100px; }
}