/* ============================================
   TOKENS DE DESIGN — Tecmakers
   Extraídos das screenshots Figma em Arquivos do site/
   Valores aproximados — validar com Figma MCP quando disponível
   ============================================ */

:root {

  /* ----------------------------------------
     Cores primárias — laranja institucional
  ---------------------------------------- */
  --color-primary:        #F97316;
  --color-primary-600:    #EA6A0F;
  --color-primary-400:    #FB923C;
  --color-primary-200:    #FED7AA;
  --color-primary-bg:     rgba(249, 115, 22, 0.08);

  --color-accent:         #F97316;

  /* Texto */
  --color-text-heading:   #FFFFFF;
  --color-text-dark:      #FFFFFF;
  --color-text-mid:       #8A94A6;
  --color-text-body:      #B0B8C4;
  --color-text-subtle:    #5C6370;
  --color-text-inverse:   #0A0A0A;

  /* Backgrounds (dark-only) */
  --color-bg-white:       #0A0A0A;   /* alias para compat — é escuro no template Tecmakers */
  --color-bg-hero:        #0A0A0A;
  --color-bg-page:        #111111;
  --color-bg-section:     #111111;
  --color-bg-card:        #1A1A1A;
  --color-bg-card-hover:  #202020;
  --color-bg-deep:        #050505;
  --color-footer:         #050505;

  /* Bordas */
  --color-border:         #262626;
  --color-border-strong:  #3A3A3A;

  /* Estados */
  --color-success:        #10B981;
  --color-warning:        #F97316;
  --color-error:          #EF4444;

  /* ----------------------------------------
     Tipografia
     Plus Jakarta Sans: display/body
     JetBrains Mono: eyebrows, labels, CTAs uppercase, badges
  ---------------------------------------- */
  --font:            'Plus Jakarta Sans', system-ui, sans-serif;
  --font-heading:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body:       'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:       'JetBrains Mono', ui-monospace, monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-4xl:  56px;
  --text-5xl:  72px;

  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --tracking-tight: -0.02em;
  --tracking-mid:   -0.01em;
  --tracking-sm:    0;
  --tracking-wide:  0.08em;
  --tracking-xwide: 0.16em;

  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ----------------------------------------
     Layout
  ---------------------------------------- */
  --container-max: 1200px;
  --container-pad: 24px;
  --header-height: 80px;

  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;
  --space-5xl: 128px;

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

  /* ----------------------------------------
     Sombras (sutis em tema dark)
  ---------------------------------------- */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 32px rgba(249, 115, 22, 0.15);

  /* ----------------------------------------
     Transições
  ---------------------------------------- */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 0.25s var(--ease);

}