/* ============================================================
   GIKSCALE — Design Tokens (CSS Custom Properties)
   ============================================================ */

:root {
  /* ── Cores Base ───────────────────────────────────────── */
  --navy:          #0B1F3A;
  --navy-mid:      #0F2640;
  --navy-surface:  #112847;
  --navy-elevated: #163358;

  --teal:          #1C8FA3;
  --teal-dim:      #156e7e;
  --teal-glow:     rgba(28, 143, 163, 0.15);

  --orange:        #E46A1A;
  --orange-dim:    #b8541a;
  --orange-glow:   rgba(228, 106, 26, 0.15);

  --red:           #B83228;
  --red-dim:       #8e2620;

  --white:         #FFFFFF;
  --gray-50:       #F8FAFC;
  --gray-100:      #F1F5F9;
  --gray-400:      #94A3B8;
  --gray-600:      #475569;
  --gray-800:      #1E293B;

  /* ── Gradientes ───────────────────────────────────────── */
  --gradient-brand:  linear-gradient(135deg, #1C8FA3 0%, #E46A1A 100%);
  --gradient-cta:    linear-gradient(90deg, #E46A1A 0%, #B83228 100%);
  --gradient-hero:   radial-gradient(ellipse 80% 60% at 50% 0%, #112847 0%, #0B1F3A 70%);
  --gradient-card:   linear-gradient(145deg, rgba(17,40,71,0.9) 0%, rgba(15,38,64,0.95) 100%);
  --gradient-glow:   radial-gradient(ellipse at center, rgba(28,143,163,0.08) 0%, transparent 70%);

  /* ── Tipografia ───────────────────────────────────────── */
  --font-primary:   'Space Grotesk', sans-serif;
  --font-secondary: 'Inter', sans-serif;

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

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

  /* ── Layout ───────────────────────────────────────────── */
  --container-max:   1280px;
  --container-pad:   1.5rem;
  --nav-height:      88px;
  --section-py:      6rem;       /* padding vertical das seções */
  --section-py-sm:   4rem;       /* mobile */

  /* ── Border Radius ────────────────────────────────────── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Sombras ──────────────────────────────────────────── */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:   0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.4);
  --shadow-xl:   0 16px 48px rgba(0,0,0,0.5);
  --shadow-teal: 0 0 32px rgba(28,143,163,0.2);
  --shadow-orange: 0 0 32px rgba(228,106,26,0.2);

  /* ── Bordas ───────────────────────────────────────────── */
  --border-subtle:  1px solid rgba(255,255,255,0.06);
  --border-card:    1px solid rgba(255,255,255,0.08);
  --border-teal:    1px solid rgba(28,143,163,0.4);
  --border-orange:  1px solid rgba(228,106,26,0.5);

  /* ── Transições ───────────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-Index ──────────────────────────────────────────── */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-nav:     200;
  --z-modal:   300;
}

/* ── Responsive overrides ──────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --text-7xl: 2.75rem;   /* 44px no mobile */
    --text-6xl: 2.25rem;   /* 36px no mobile */
    --text-5xl: 2rem;      /* 32px no mobile */
    --section-py: var(--section-py-sm);
    --container-pad: 1.25rem;
  }
}

@media (max-width: 480px) {
  :root {
    --text-7xl: 2.25rem;   /* 36px no mobile pequeno */
    --text-6xl: 1.875rem;
    --section-py: 3rem;
    --container-pad: 1rem;
  }
}