/* ============================================================
   ECO Tecnologia e Análise Ambiental — Design System Tokens
   Projeto: HOME WEB  |  Fase 2 — Redesign com logo oficial
   Paleta extraída do logo: hexágono navy + gradiente ciano→verde
   ============================================================ */

:root {

  /* ── CORES PRIMÁRIAS — Logo ECO ──────────────────────────
     Extraídas do logo oficial hexagonal:
     - Fundo hexágono:  navy escuro #1E3A5F
     - Gradiente borda: ciano #0AB9E6 → verde brilhante #2DDA5D
  ─────────────────────────────────────────────────────── */
  --eco-navy:           #1E3A5F;   /* Azul naval — cor primária principal */
  --eco-navy-dark:      #132845;   /* Navy escuro — hovers / gradientes   */
  --eco-navy-deeper:    #0D1D35;   /* Navy profundo — hero overlay        */
  --eco-navy-mid:       #2A4F7A;   /* Navy médio — cards / hover          */
  --eco-navy-light:     #3A6496;   /* Navy claro — links / ícones         */
  --eco-navy-muted:     #E8EFF8;   /* Navy suave — backgrounds            */

  --eco-cyan:           #0AB9E6;   /* Ciano do logo — acento técnico      */
  --eco-cyan-light:     #3DCFF5;   /* Ciano claro                         */
  --eco-cyan-dark:      #0490BA;   /* Ciano escuro                        */

  --eco-green:          #2DDA5D;   /* Verde brilhante do logo             */
  --eco-green-mid:      #22C04E;   /* Verde médio — hovers                */
  --eco-green-dark:     #19A040;   /* Verde escuro — estados ativos       */
  --eco-green-muted:    #E6FBF0;   /* Verde suave — backgrounds           */

  /* Gradiente característico do logo (borda hexagonal) */
  --eco-gradient-brand: linear-gradient(135deg, #0AB9E6 0%, #1DCC60 60%, #2DDA5D 100%);
  --eco-gradient-brand-h: linear-gradient(90deg, #0AB9E6 0%, #2DDA5D 100%);

  /* ── NEUTROS ──────────────────────────────────────────── */
  --eco-white:          #FFFFFF;
  --eco-off-white:      #F4F7FB;   /* Background alternado padrão         */
  --eco-gray-50:        #F9FAFB;
  --eco-gray-100:       #F1F4F8;
  --eco-gray-200:       #E2E8F0;
  --eco-gray-300:       #CBD5E0;
  --eco-gray-400:       #A0AABB;
  --eco-gray-500:       #718096;
  --eco-gray-600:       #4A5568;
  --eco-gray-700:       #2D3748;
  --eco-gray-800:       #1A202C;
  --eco-gray-900:       #0F1724;
  --eco-graphite:       #0F1724;   /* Navy muito escuro / footer          */

  /* ── CORES SEMÂNTICAS ────────────────────────────────── */
  --eco-success:        #1DCC60;
  --eco-warning:        #F6AD55;
  --eco-error:          #FC4F4F;

  /* ── TIPOGRAFIA ───────────────────────────────────────── */
  --font-primary:       'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:          'JetBrains Mono', 'Fira Code', monospace;

  --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 */

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

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;
  --leading-loose:  1.8;

  --tracking-tight:  -0.04em;
  --tracking-snug:   -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.1em;
  --tracking-widest:  0.15em;

  /* ── ESPAÇAMENTO ─────────────────────────────────────── */
  --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 */

  /* ── GRID / LAYOUT ───────────────────────────────────── */
  --container-max:    1280px;
  --container-wide:   1440px;
  --container-narrow:  860px;
  --container-px:     clamp(1rem, 4vw, 3rem);

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

  /* ── SOMBRAS ─────────────────────────────────────────── */
  --shadow-xs:   0 1px 3px rgba(14,30,55,0.08);
  --shadow-sm:   0 2px 8px rgba(14,30,55,0.10);
  --shadow-md:   0 4px 20px rgba(14,30,55,0.10);
  --shadow-lg:   0 8px 32px rgba(14,30,55,0.12);
  --shadow-xl:   0 16px 48px rgba(14,30,55,0.16);
  --shadow-2xl:  0 24px 64px rgba(14,30,55,0.20);
  --shadow-navy: 0 4px 24px rgba(30,58,95,0.30);
  --shadow-cyan: 0 4px 20px rgba(10,185,230,0.25);
  --shadow-green:0 4px 20px rgba(45,218,93,0.25);

  /* ── TRANSIÇÕES ──────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout: cubic-bezier(0.45, 0, 0.55, 1);
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --duration-slower: 600ms;

  /* ── Z-INDEX ─────────────────────────────────────────── */
  --z-base:    0;
  --z-above:   10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-header:  500;
  --z-toast:   1000;

  /* ── GRADIENTES DE SEÇÃO ─────────────────────────────── */
  /* Hero: foto com overlay navy profundo */
  --gradient-hero:       linear-gradient(135deg, rgba(13,29,53,0.88) 0%, rgba(30,58,95,0.72) 60%, rgba(10,185,230,0.35) 100%);
  /* Cards de serviço: verde→ciano (como referência visual) */
  --gradient-service:    linear-gradient(160deg, #0AB9E6 0%, #15C85C 100%);
  --gradient-service-2:  linear-gradient(160deg, #0490BA 0%, #19A040 100%);
  /* Seção tecnologia: navy profundo */
  --gradient-tech:       linear-gradient(160deg, #0D1D35 0%, #1E3A5F 60%, #0A3050 100%);
  /* CTA final: gradiente da marca */
  --gradient-cta:        linear-gradient(135deg, #0D1D35 0%, #1E3A5F 50%, #0490BA 100%);
  /* Card hover: overlay do logo */
  --gradient-card-hover: linear-gradient(180deg, transparent 30%, rgba(13,29,53,0.92) 100%);
  --gradient-card-idle:  linear-gradient(180deg, transparent 50%, rgba(13,29,53,0.75) 100%);

  /* ── HEADER ──────────────────────────────────────────── */
  --header-h:        80px;
  --header-h-mobile: 64px;
}

/* ── DARK SEÇÕES ──────────────────────────────────────────── */
.section--dark {
  --text-primary:   #FFFFFF;
  --text-secondary: rgba(255,255,255,0.72);
  --text-muted:     rgba(255,255,255,0.50);
}