/* ==========================================================================
   HOMEPAGE FOUNDATION
   Yellow Tokens
   --------------------------------------------------------------------------
   Este arquivo define apenas os tokens utilizados pela Homepage.

   Responsabilidades
   -----------------
   • Espaçamentos
   • Larguras
   • Border Radius
   • Sombras
   • Transições
   • Z-index

   Não contém:
   • Layout
   • Grids
   • Componentes
   • Hero
   • Cards
   • Tipografia
   • Botões
   • Animações

   Todos os componentes da Homepage devem consumir apenas os tokens
   definidos neste arquivo.
   ========================================================================== */



/* ==========================================================================
   HOMEPAGE TOKENS
   ========================================================================== */

:root {

    /* ======================================================
       CONTENT WIDTHS
       ====================================================== */

    --homepage-container-width: 1280px;

    --homepage-figure-max-width: 1400px;

    --homepage-reading-width: 760px;

    --homepage-text-width: 68ch;

    --homepage-hero-text-width: 620px;



    /* ======================================================
       SECTION SPACING
       ====================================================== */

    --homepage-section-spacing-mobile: 5rem;

    --homepage-section-spacing-tablet: 6.5rem;

    --homepage-section-spacing-desktop: 8rem;



    /* ======================================================
       CONTENT SPACING
       ====================================================== */

    --homepage-space-xs: .5rem;

    --homepage-space-sm: 1rem;

    --homepage-space-md: 1.5rem;

    --homepage-space-lg: 2rem;

    --homepage-space-xl: 3rem;

    --homepage-space-2xl: 4rem;

    --homepage-space-3xl: 6rem;



    /* ======================================================
       BORDER RADIUS
       ====================================================== */

    --homepage-radius-sm: .5rem;

    --homepage-radius-md: .875rem;

    --homepage-radius-lg: 1.25rem;

    --homepage-radius-xl: 1.75rem;



    /* ======================================================
       SHADOWS
       ====================================================== */

    --homepage-shadow-soft:
        0 10px 30px rgba(0,0,0,.05);

    --homepage-shadow-card:
        0 18px 50px rgba(0,0,0,.06);



    /* ======================================================
       TRANSITIONS
       ====================================================== */

    --homepage-transition-fast: 180ms ease;

    --homepage-transition-normal: 300ms ease;

    --homepage-transition-slow: 500ms ease;



    /* ======================================================
       Z-INDEX
       ====================================================== */

    --homepage-z-base: 1;

    --homepage-z-content: 10;

    --homepage-z-overlay: 100;

}