/* Caminho: public_html/fcseg/assets/css/tokens.css */
/* FC SEG, ponto único de verdade do design. Tema claro: Sol e Energia. */

@font-face {
  font-family: 'Space Grotesk';
  src: url('../fonts/SpaceGrotesk-var.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/InterVariable.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Cores da marca, extraídas do logotipo oficial */
  --sol-500: #F7941D;          /* laranja solar principal */
  --sol-400: #FDB913;          /* âmbar do topo do sol */
  --sol-600: #EE7623;          /* laranja profundo */
  --sol-700: #D9570F;          /* queimado, hover */
  --azul-600: #1B5FAA;         /* azul do painel */
  --azul-500: #2E86DE;         /* azul claro */
  --azul-800: #123E70;         /* azul escuro de contraste */
  --verde-500: #2FA84F;        /* verde da assinatura */
  --verde-600: #1F8A3D;

  /* Neutros do tema claro, quentes como luz do dia */
  --fundo: #FBF8F3;
  --fundo-suave: #F4EEE3;
  --superficie: #FFFFFF;
  --tinta-900: #1C2230;        /* texto principal */
  --tinta-600: #46505F;        /* texto secundário */
  --tinta-400: #7A828F;        /* legendas */
  --linha: #E9E1D2;            /* bordas suaves */

  /* Gradientes de identidade */
  --grad-sol: linear-gradient(135deg, var(--sol-400) 0%, var(--sol-500) 45%, var(--sol-600) 100%);
  --grad-ceu: linear-gradient(160deg, #FFF8EC 0%, #FDF3E0 40%, #EAF2FC 100%);
  --grad-energia: linear-gradient(90deg, var(--sol-500), var(--azul-500));

  /* Sombras suaves e coloridas (glow) */
  --sombra-1: 0 2px 10px rgba(28, 34, 48, .06);
  --sombra-2: 0 14px 40px -12px rgba(28, 34, 48, .14);
  --sombra-sol: 0 12px 34px -10px rgba(247, 148, 29, .45);
  --sombra-azul: 0 12px 34px -10px rgba(27, 95, 170, .35);

  /* Tipografia */
  --fonte-titulo: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --fonte-texto: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --texto-xs: .8125rem;
  --texto-sm: .9375rem;
  --texto-md: 1.0625rem;
  --texto-lg: clamp(1.15rem, 1rem + .6vw, 1.375rem);
  --titulo-sm: clamp(1.35rem, 1.1rem + 1vw, 1.75rem);
  --titulo-md: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  --titulo-lg: clamp(2.4rem, 1.6rem + 3.4vw, 4.2rem);

  /* Espaçamento com muito respiro */
  --esp-1: .5rem;
  --esp-2: 1rem;
  --esp-3: 1.5rem;
  --esp-4: 2.25rem;
  --esp-5: 3.5rem;
  --esp-6: 5.5rem;
  --esp-secao: clamp(4rem, 3rem + 5vw, 8rem);

  /* Raios */
  --raio-sm: 10px;
  --raio-md: 18px;
  --raio-lg: 28px;
  --raio-pilula: 999px;

  /* Tokens de motion */
  --motion-duration-instant: 100ms;
  --motion-duration-fast: 200ms;
  --motion-duration-base: 350ms;
  --motion-duration-expressive: 750ms;
  --motion-duration-cinematic: 1300ms;
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* assinatura da marca */
  --motion-ease-in: cubic-bezier(0.55, 0, 0.9, 0.4);
  --motion-ease-spring: linear(0, 0.3 9%, 0.74 20.5%, 0.98 28.8%, 1.06 35.6%, 1.05 42.4%, 1 51.2%, 0.985 60.5%, 1 100%);

  /* Larguras */
  --largura-max: 1200px;
  --largura-texto: 70ch;
}