/* ==========================================================================
   DESIGN TOKENS — Castillo Empresarial
   Single source of truth for all visual values.
   ========================================================================== */

:root {
  /* ——— Colors ——— */
  --color-primary:        #0077A1;
  --color-primary-dark:   #005f82;
  --color-primary-light:  #00a3d9;
  --color-primary-bg:     #e6f4f9;
  --color-primary-ghost:  rgba(0, 119, 161, 0.08);

  --color-white:          #FFFFFF;
  --color-black:          #000000;
  --color-text:           #1a1a2e;
  --color-text-secondary: #555770;
  --color-text-muted:     #8a8ca5;

  --color-bg:             #f7f8fc;
  --color-bg-alt:         #eef0f6;
  --color-surface:        #FFFFFF;
  --color-border:         #e2e4ed;

  --color-success:        #10b981;
  --color-warning:        #f59e0b;
  --color-danger:         #ef4444;
  --color-star:           #f59e0b;

  --color-whatsapp:       #25D366;
  --color-whatsapp-dark:  #1da851;

  /* ——— Typography ——— */
  --font-family:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-xs:         0.75rem;    /* 12px */
  --font-size-sm:         0.875rem;   /* 14px */
  --font-size-base:       1rem;       /* 16px */
  --font-size-md:         1.125rem;   /* 18px */
  --font-size-lg:         1.25rem;    /* 20px */
  --font-size-xl:         1.5rem;     /* 24px */
  --font-size-2xl:        2rem;       /* 32px */
  --font-size-3xl:        2.5rem;     /* 40px */
  --font-size-4xl:        3rem;       /* 48px */

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-black:    900;

  --line-height-tight:    1.2;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.75;

  /* ——— Spacing ——— */
  --space-2xs:            0.25rem;    /* 4px  */
  --space-xs:             0.5rem;     /* 8px  */
  --space-sm:             0.75rem;    /* 12px */
  --space-md:             1rem;       /* 16px */
  --space-lg:             1.5rem;     /* 24px */
  --space-xl:             2rem;       /* 32px */
  --space-2xl:            3rem;       /* 48px */
  --space-3xl:            4rem;       /* 64px */
  --space-4xl:            6rem;       /* 96px */

  /* ——— Border Radius ——— */
  --radius-sm:            0.375rem;   /* 6px  */
  --radius-md:            0.5rem;     /* 8px  */
  --radius-lg:            0.75rem;    /* 12px */
  --radius-xl:            1rem;       /* 16px */
  --radius-2xl:           1.5rem;     /* 24px */
  --radius-full:          9999px;

  /* ——— Shadows ——— */
  --shadow-xs:            0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:            0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md:            0 4px 16px rgba(0, 0, 0, 0.08);
  --shadow-lg:            0 8px 32px rgba(0, 0, 0, 0.10);
  --shadow-xl:            0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-primary:       0 4px 20px rgba(0, 119, 161, 0.25);

  /* ——— Transitions ——— */
  --transition-fast:      150ms ease;
  --transition-base:      250ms ease;
  --transition-slow:      400ms ease;
  --transition-spring:    500ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ——— Z-Index Scale ——— */
  --z-dropdown:           100;
  --z-sticky:             200;
  --z-navbar:             300;
  --z-overlay:            400;
  --z-modal:              500;
  --z-whatsapp:           600;

  /* ——— Layout ——— */
  --container-max:        1200px;
  --container-padding:    1.25rem;
  --navbar-height:        72px;
}