/* ============================================
   BHM Construcciones — Design Tokens
   ============================================ */

/* --- Google Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&display=swap');

:root {
  /* =====================
     BASE COLORS
     ===================== */

  /* Primary — Azul marino */
  --color-primary:        #1F4869;
  --color-primary-light:  #3D7BA8;
  --color-primary-dark:   #152F45;

  /* Accent — Naranja construcción */
  --color-accent:         #E87722;
  --color-accent-light:   #F09A56;
  --color-accent-dark:    #C5601A;

  /* Neutrals */
  --color-black:          #1A1A1A;
  --color-gray-900:       #2D2D2D;
  --color-gray-700:       #4A4A4A;
  --color-gray-500:       #8A8B8D;
  --color-gray-300:       #B8B9BB;
  --color-gray-200:       #D4D4D4;
  --color-gray-100:       #EBEBEB;
  --color-white:          #F5F5F2;
  --color-pure-white:     #FFFFFF;

  /* =====================
     SEMANTIC COLORS
     ===================== */
  --color-bg:             var(--color-white);
  --color-bg-alt:         var(--color-gray-100);
  --color-bg-dark:        var(--color-primary);
  --color-bg-darker:      var(--color-primary-dark);

  --color-fg1:            var(--color-black);
  --color-fg2:            var(--color-gray-700);
  --color-fg3:            var(--color-gray-500);
  --color-fg-inverse:     var(--color-pure-white);

  --color-border:         var(--color-gray-200);
  --color-border-strong:  var(--color-gray-300);

  --color-link:           var(--color-primary);
  --color-link-hover:     var(--color-primary-light);

  --color-success:        #2E7D4F;
  --color-warning:        var(--color-accent);
  --color-error:          #C0392B;

  /* =====================
     TYPOGRAPHY
     ===================== */

  /* Font families */
  --font-display:         'Plus Jakarta Sans', sans-serif;
  --font-body:            'DM Sans', sans-serif;

  /* Font sizes — modular scale */
  --text-xs:    0.75rem;   /* 12px */
  --text-sm:    0.875rem;  /* 14px */
  --text-base:  1rem;      /* 16px */
  --text-lg:    1.125rem;  /* 18px */
  --text-xl:    1.25rem;   /* 20px */
  --text-2xl:   1.5rem;    /* 24px */
  --text-3xl:   1.875rem;  /* 30px */
  --text-4xl:   2.25rem;   /* 36px */
  --text-5xl:   3rem;      /* 48px */
  --text-6xl:   3.75rem;   /* 60px */

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

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

  /* Letter spacing */
  --tracking-tight:   -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-caps:    0.08em;

  /* =====================
     SPACING
     ===================== */
  --space-1:   0.25rem;    /* 4px */
  --space-2:   0.5rem;     /* 8px */
  --space-3:   0.75rem;    /* 12px */
  --space-4:   1rem;       /* 16px */
  --space-5:   1.25rem;    /* 20px */
  --space-6:   1.5rem;     /* 24px */
  --space-8:   2rem;       /* 32px */
  --space-10:  2.5rem;     /* 40px */
  --space-12:  3rem;       /* 48px */
  --space-16:  4rem;       /* 64px */
  --space-20:  5rem;       /* 80px */
  --space-24:  6rem;       /* 96px */

  /* =====================
     BORDERS & RADII
     ===================== */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-full: 9999px;

  /* =====================
     SHADOWS
     ===================== */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:   0 2px 8px rgba(0,0,0,0.08);
  --shadow-lg:   0 4px 16px rgba(0,0,0,0.10);
  --shadow-xl:   0 8px 32px rgba(0,0,0,0.12);

  /* =====================
     TRANSITIONS
     ===================== */
  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 400ms;
}

/* =====================
   SEMANTIC TYPE STYLES
   ===================== */
h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-extrabold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg1);
}
h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg1);
}
h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-fg1);
}
h4, .h4 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-fg2);
}
p, .body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-fg2);
}
.body-lg {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-fg2);
}
.caption {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--color-fg3);
}
.overline {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-fg3);
}