/* ============================================================================
   Hub Insight — Design Tokens (Layer: tokens)
   ----------------------------------------------------------------------------
   Naming: --ds-* (design system). NUNCA renomeia tokens existentes
   (--bg-*, --text-*, --radius-*, --accent-*, --lg-* permanecem autoritativos).

   Uso: clamp(min, base + vw, max) para escalar fluido entre 320px (mobile)
   e ~1440px (desktop). Acima de 1440 mantém o teto.

   Breakpoints (literais — CSS vars não funcionam em @media):
     --bp-sm:  480px   mobile pequeno → médio
     --bp-md:  768px   tablet portrait
     --bp-lg:  1024px  tablet landscape / laptop pequeno
     --bp-xl:  1280px  desktop padrão
     --bp-2xl: 1536px  desktop largo
   ============================================================================ */

:root {
    /* --- Spacing scale (fluido) ----------------------------------------- */
    --ds-space-0: 0;
    --ds-space-1: clamp(0.125rem, 0.1rem  + 0.1vw,  0.25rem);   /*  2 →  4 px */
    --ds-space-2: clamp(0.25rem,  0.22rem + 0.1vw,  0.375rem);  /*  4 →  6 px */
    --ds-space-3: clamp(0.5rem,   0.45rem + 0.25vw, 0.75rem);   /*  8 → 12 px */
    --ds-space-4: clamp(0.75rem,  0.65rem + 0.5vw,  1rem);      /* 12 → 16 px */
    --ds-space-5: clamp(1rem,     0.85rem + 0.7vw,  1.5rem);    /* 16 → 24 px */
    --ds-space-6: clamp(1.25rem,  1.05rem + 1vw,    2rem);      /* 20 → 32 px */
    --ds-space-7: clamp(1.5rem,   1.2rem  + 1.5vw,  2.5rem);    /* 24 → 40 px */
    --ds-space-8: clamp(1.75rem,  1.3rem  + 2vw,    3rem);      /* 28 → 48 px */
    --ds-space-10: clamp(2.5rem,  1.7rem  + 3.5vw,  4rem);      /* 40 → 64 px */
    --ds-space-12: clamp(3rem,    2rem    + 4vw,    5rem);      /* 48 → 80 px */

    /* --- Type scale (fluido) -------------------------------------------- */
    --ds-text-xs:   clamp(0.7rem,   0.68rem + 0.1vw,  0.75rem);  /* 11 → 12 px */
    --ds-text-sm:   clamp(0.8rem,   0.77rem + 0.15vw, 0.875rem); /* 13 → 14 px */
    --ds-text-base: clamp(0.875rem, 0.82rem + 0.25vw, 1rem);     /* 14 → 16 px */
    --ds-text-lg:   clamp(1rem,     0.92rem + 0.35vw, 1.125rem); /* 16 → 18 px */
    --ds-text-xl:   clamp(1.125rem, 1rem    + 0.5vw,  1.375rem); /* 18 → 22 px */
    --ds-text-2xl:  clamp(1.25rem,  1.05rem + 0.85vw, 1.75rem);  /* 20 → 28 px */
    --ds-text-3xl:  clamp(1.5rem,   1.15rem + 1.5vw,  2.25rem);  /* 24 → 36 px */
    --ds-text-4xl:  clamp(1.75rem,  1.25rem + 2.2vw,  2.75rem);  /* 28 → 44 px */
    --ds-text-5xl:  clamp(2rem,     1.4rem  + 2.8vw,  3.5rem);   /* 32 → 56 px */
    --ds-text-6xl:  clamp(2.5rem,   1.6rem  + 4vw,    4.5rem);   /* 40 → 72 px */

    /* --- Line heights --------------------------------------------------- */
    --ds-leading-tight:   1.15;
    --ds-leading-snug:    1.3;
    --ds-leading-normal:  1.5;
    --ds-leading-relaxed: 1.75;

    /* --- Layout dimensions (fluido com tetos sensatos) ------------------ */
    --ds-sidebar-w-expanded:  clamp(220px, 18vw, 280px);
    --ds-sidebar-w-collapsed: 80px; /* alinhado ao preload em legacy */
    --ds-sidebar-offset:      1rem; /* gap entre viewport e sidebar (left/top) */
    --ds-topbar-h:            clamp(56px, 4vw + 40px, 72px);
    --ds-container-max:       1440px;
    --ds-filter-panel-w:      clamp(280px, 24vw, 400px);
    --ds-modal-max-h:         min(85dvh, 720px);
    --ds-modal-max-w:         min(92vw, 720px);
    --ds-content-padding-x:   clamp(1rem, 2vw + 0.5rem, 2rem);

    /* --- Icon / círculo sizes ------------------------------------------- */
    --ds-icon-xs: 16px;
    --ds-icon-sm: 24px;
    --ds-icon-md: 32px;
    --ds-icon-lg: 48px;
    --ds-icon-xl: 56px;

    /* --- Radius (aliases — não duplica, aponta para existentes) --------- */
    --ds-radius-sm:   var(--radius-sm, 0.5rem);
    --ds-radius-md:   var(--radius-md, 1rem);
    --ds-radius-lg:   var(--radius-lg, 1.5rem);
    --ds-radius-pill: 9999px;

    /* --- Z-index scale -------------------------------------------------- */
    --ds-z-base:     1;
    --ds-z-dropdown: 100;
    --ds-z-sticky:   200;
    --ds-z-overlay:  500;
    --ds-z-modal:    600;
    --ds-z-toast:    700;

    /* --- Transitions ---------------------------------------------------- */
    --ds-ease-out:        cubic-bezier(0.22, 1, 0.36, 1);
    --ds-ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
    --ds-duration-fast:   150ms;
    --ds-duration-normal: 250ms;
    --ds-duration-slow:   400ms;
}