/* ============================================================
   DESIGN TOKENS — UTL Group Website
   Cores, tipografia, spacing — todos os outros CSS importam isso.
   ============================================================ */

:root {
  /* ─── Cores ─────────────────────────────────────────── */
  --gold:           #d4af37;
  --gold-bright:    #e6c652;
  --gold-soft:      rgba(212, 175, 55, 0.55);
  --gold-dim:       rgba(212, 175, 55, 0.15);
  --gold-glow:      rgba(212, 175, 55, 0.05);
  --green-origin:   #4ade80;

  --bg:             #050505;
  --bg-2:           #0a0a0a;
  --bg-3:           #0f0f0f;
  --bg-card:        #0a0a0a;
  --bg-elevated:    #111114;

  --text:           #ffffff;
  --text-muted:     rgba(255, 255, 255, 0.62);
  --text-dim:       rgba(255, 255, 255, 0.32);
  --text-faint:     rgba(255, 255, 255, 0.16);

  --border:         rgba(255, 255, 255, 0.08);
  --border-strong:  rgba(255, 255, 255, 0.16);
  --border-gold:    rgba(212, 175, 55, 0.32);

  /* ─── Tipografia ────────────────────────────────────── */
  --font-display:   'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:      'Inter',  -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-arabic:    'Cairo',  'Inter', sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Escala fluida (clamp) — funciona em mobile e desktop */
  --fs-eyebrow:     clamp(0.6875rem, 0.65rem + 0.2vw, 0.8125rem);
  --fs-body-sm:     clamp(0.8125rem, 0.78rem + 0.2vw, 0.9375rem);
  --fs-body:        clamp(0.9375rem, 0.9rem + 0.3vw, 1.0625rem);
  --fs-lead:        clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --fs-h3:          clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --fs-h2:          clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
  --fs-h1:          clamp(2.25rem, 1.8rem + 2vw, 3.75rem);
  --fs-display:     clamp(2.75rem, 2rem + 3.5vw, 5.5rem);

  /* Pesos */
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-bold:        700;
  --fw-black:       900;

  /* Letter-spacing */
  --ls-tight:       -0.02em;
  --ls-normal:      0;
  --ls-wide:        0.1em;
  --ls-eyebrow:     0.25em;

  /* Line-height */
  --lh-tight:       1.05;
  --lh-snug:        1.2;
  --lh-base:        1.55;
  --lh-loose:       1.75;

  /* ─── Spacing scale ─────────────────────────────────── */
  --sp-1:           0.25rem;   /*  4px */
  --sp-2:           0.5rem;    /*  8px */
  --sp-3:           0.75rem;   /* 12px */
  --sp-4:           1rem;      /* 16px */
  --sp-5:           1.5rem;    /* 24px */
  --sp-6:           2rem;      /* 32px */
  --sp-7:           3rem;      /* 48px */
  --sp-8:           4rem;      /* 64px */
  --sp-9:           6rem;      /* 96px */
  --sp-10:          8rem;      /* 128px */

  /* ─── Layout ────────────────────────────────────────── */
  --container:      1280px;
  --container-narrow: 920px;
  --container-wide: 1440px;
  --gutter:         clamp(1rem, 2vw, 2rem);

  /* Header / nav */
  --nav-h:          72px;
  --nav-h-mobile:   60px;

  /* ─── Radius ────────────────────────────────────────── */
  --r-sm:           4px;
  --r:              8px;
  --r-lg:           16px;
  --r-pill:         999px;

  /* ─── Sombra ────────────────────────────────────────── */
  --shadow-sm:      0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow:         0 8px 32px rgba(0, 0, 0, 0.5);
  --shadow-lg:      0 16px 64px rgba(0, 0, 0, 0.6);
  --shadow-gold:    0 0 32px rgba(212, 175, 55, 0.15);

  /* ─── Transições ────────────────────────────────────── */
  --t-fast:         120ms ease;
  --t:              220ms ease;
  --t-slow:         420ms ease;

  /* ─── Z-index ───────────────────────────────────────── */
  --z-nav:          50;
  --z-drawer:       60;
  --z-modal:        100;
}