/* ==========================================================================
   BIZIO MADRID DESIGN TOKENS
   Brand identity: tattoo studio, dark aesthetic, professional
   ========================================================================== */

:root {
  /* -- Colors (Bizio Palette) ------------------------------------------- */
  --bz-crema:      #fefaee;
  --bz-naranja:    #f55b11;
  --bz-naranja-dk: #d44d0e;
  --bz-white:      #ffffff;
  --bz-gray:       #4f4d4d;
  --bz-gray-lt:    #7a7878;
  --bz-black:      #000000;
  --bz-bg:         #fefaee;
  --bz-bg-dark:    #0e0c19;

  /* Derived */
  --bz-naranja-10: rgba(245, 91, 17, 0.1);
  --bz-naranja-20: rgba(245, 91, 17, 0.2);
  --bz-border:     rgba(79, 77, 77, 0.15);
  --bz-overlay:    rgba(0, 0, 0, 0.7);

  /* -- Typography ------------------------------------------------------- */
  --bz-font-display: 'Anton', sans-serif;
  --bz-font-body:    'Barlow', sans-serif;

  /* Font sizes */
  --bz-text-hero:  clamp(2.5rem, 6vw, 4rem);
  --bz-text-h1:    2.25rem;
  --bz-text-h2:    1.6rem;
  --bz-text-h3:    1.2rem;
  --bz-text-lg:    1.125rem;
  --bz-text-md:    1.05rem;
  --bz-text-sm:    0.875rem;
  --bz-text-xs:    0.75rem;

  /* Font weights */
  --bz-weight-regular:  400;
  --bz-weight-medium:   500;
  --bz-weight-semibold: 600;
  --bz-weight-bold:     700;

  /* Line heights */
  --bz-leading-tight:   1.15;
  --bz-leading-snug:    1.35;
  --bz-leading-normal:  1.6;
  --bz-leading-relaxed: 1.8;

  /* -- Spacing ---------------------------------------------------------- */
  --bz-section:      5rem;
  --bz-section-sm:   3rem;
  --bz-container:    780px;
  --bz-container-lg: 1200px;
  --bz-gap:          2rem;
  --bz-gap-sm:       1rem;
  --bz-gap-xs:       0.5rem;

  /* -- Border radius ---------------------------------------------------- */
  --bz-radius:    0.75rem;
  --bz-radius-sm: 0.5rem;
  --bz-radius-lg: 1rem;

  /* -- Shadows ---------------------------------------------------------- */
  --bz-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --bz-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --bz-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.14);

  /* -- Transitions ------------------------------------------------------ */
  --bz-ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --bz-duration-fast: 150ms;
  --bz-duration:      300ms;
  --bz-duration-slow: 500ms;

  /* -- Z-index ---------------------------------------------------------- */
  --bz-z-base:    0;
  --bz-z-above:   10;
  --bz-z-navbar:  100;
  --bz-z-overlay: 200;
  --bz-z-modal:   300;
}