/* ============================================================
   DCS S.A. — Design Tokens v2 (Enterprise)
   ============================================================ */

:root {
  /* ── COLORES ── */
  --color-primary:          #76D13B;
  --color-primary-hover:    #5bb82a;
  --color-primary-light:    rgba(118, 209, 59, 0.10);
  --color-primary-mid:      rgba(118, 209, 59, 0.18);
  --color-primary-dark:     #4a9a20;

  --color-dark:             #343434;
  --color-dark-2:           #1e1e1e;
  --color-dark-3:           #141414;

  --color-text-primary:     #1a1a1a;
  --color-text-secondary:   #5a5a5a;
  --color-text-muted:       #8a8a8a;
  --color-text-on-dark:     #ffffff;
  --color-text-on-dark-2:   rgba(255, 255, 255, 0.72);
  --color-text-on-dark-3:   rgba(255, 255, 255, 0.42);

  --color-white:            #ffffff;
  --color-bg-light:         #f6f7f5;
  --color-bg-lighter:       #fafafa;
  --color-bg-dark:          #1e1e1e;
  --color-bg-dark-2:        #252525;

  --color-border:           #e2e2e2;
  --color-border-light:     #eeeeee;
  --color-border-dark:      rgba(255, 255, 255, 0.08);

  --color-overlay:          rgba(0, 0, 0, 0.55);
  --color-shadow:           rgba(0, 0, 0, 0.10);
  --color-shadow-light:     rgba(0, 0, 0, 0.05);
  --color-shadow-green:     rgba(118, 209, 59, 0.22);

  --color-error:            #d93025;
  --color-error-bg:         #fce8e6;
  --color-success:          #1e8e3e;
  --color-success-bg:       #e6f4ea;

  /* ── TIPOGRAFÍA (escala enterprise) ── */
  --font-family:            'Quicksand', sans-serif;
  --font-weight-light:      300;
  --font-weight-regular:    400;
  --font-weight-medium:     500;
  --font-weight-semibold:   600;
  --font-weight-bold:       700;

  /* Escala mayor para impacto visual */
  --text-display:           80px;
  --text-h1:                66px;
  --text-h2:                46px;
  --text-h3:                30px;
  --text-h4:                21px;
  --text-body-lg:           20px;
  --text-body:              17px;
  --text-small:             14px;
  --text-label:             11px;

  --line-height-display:    1.02;
  --line-height-heading:    1.12;
  --line-height-body:       1.72;
  --line-height-tight:      1.30;

  --letter-spacing-display: -0.035em;
  --letter-spacing-heading: -0.025em;
  --letter-spacing-label:   0.10em;
  --letter-spacing-caps:    0.08em;

  /* ── ESPACIADO (base 8px, generoso) ── */
  --space-1:   8px;
  --space-2:   16px;
  --space-3:   24px;
  --space-4:   32px;
  --space-5:   40px;
  --space-6:   56px;
  --space-7:   64px;
  --space-8:   72px;
  --space-10:  96px;
  --space-12:  112px;
  --space-15:  140px;
  --space-20:  180px;

  /* ── LAYOUT ── */
  --container-max:         1200px;
  --container-padding:     32px;
  --section-padding-v:     var(--space-15);
  --section-padding-v-sm:  var(--space-10);

  /* ── BORDES ── */
  --radius-xs:    3px;
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    18px;
  --radius-xl:    26px;
  --radius-2xl:   36px;
  --radius-pill:  999px;

  /* ── SOMBRAS (más refinadas) ── */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:    0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:    0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg:    0 16px 48px rgba(0,0,0,0.10);
  --shadow-xl:    0 24px 72px rgba(0,0,0,0.14);
  --shadow-card:      0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.05);
  --shadow-card-hover: 0 2px 6px rgba(0,0,0,0.04), 0 16px 48px rgba(0,0,0,0.12);
  --shadow-green: 0 8px 28px rgba(118,209,59,0.28);
  --shadow-nav:   0 1px 0 rgba(0,0,0,0.06);

  /* ── TRANSICIONES ── */
  --transition-fast:    100ms ease;
  --transition-base:    200ms ease;
  --transition-slow:    350ms ease;
  --transition-spring:  400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth:  380ms cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* ── NAVEGACIÓN ── */
  --nav-height:           68px;
  --nav-height-scrolled:  54px;
  --nav-bg:               rgba(255, 255, 255, 0.94);
  --nav-bg-scrolled:      rgba(255, 255, 255, 0.98);

  /* ── Z-INDEX ── */
  --z-below:      -1;
  --z-base:        0;
  --z-raised:     10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;
  --z-toast:      500;
}