/* =================================================================
   C&F CONSULTORES — Design Tokens
   Paleta basada en la identidad corporativa real del logo
   Navy profundo + Naranja bronceado + Neutros editoriales cálidos
   ================================================================= */

:root {
  /* --- Colores Primarios (derivados del logo oficial C&F) --- */
  --c-navy:         #1E2A7F;   /* Azul marino del logotipo */
  --c-navy-deep:    #0F1847;   /* Navy para backgrounds profundos */
  --c-navy-soft:    #2E3D9E;   /* Navy para hover/estados activos */

  --c-orange:       #E85A1E;   /* Naranja del triángulo logo */
  --c-orange-deep:  #B8621B;   /* Cobre editorial (refinamiento premium) */
  --c-orange-soft:  #F58A55;   /* Naranja para hover sutil */

  /* --- Neutros cálidos (evitamos blanco puro para sensación editorial) --- */
  --c-cream:        #FAF6F0;   /* Background principal */
  --c-ivory:        #F5EFE6;   /* Background secundario */
  --c-line:         #E5DFD3;   /* Divisores, bordes finos */
  --c-graphite:     #1A1A1A;   /* Texto principal */
  --c-smoke:        #6B7280;   /* Texto secundario */
  --c-mist:         #9CA3AF;   /* Texto placeholder */
  --c-white:        #FFFFFF;

  /* --- Colores semánticos (discretos, no saturados) --- */
  --c-success:      #4F7338;
  --c-error:        #8B2635;
  --c-warning:      #B8621B;
  --c-info:         var(--c-navy);

  /* --- Tipografías --- */
  --f-display:      'Fraunces', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --f-body:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --f-mono:         'JetBrains Mono', 'SF Mono', Consolas, monospace;

  /* --- Escala tipográfica (type scale 1.333 — Perfect Fourth) --- */
  --fs-xs:          0.75rem;    /* 12px */
  --fs-sm:          0.875rem;   /* 14px */
  --fs-base:        1rem;       /* 16px */
  --fs-md:          1.125rem;   /* 18px */
  --fs-lg:          1.333rem;   /* 21px */
  --fs-xl:          1.777rem;   /* 28px */
  --fs-2xl:         2.369rem;   /* 38px */
  --fs-3xl:         3.157rem;   /* 51px */
  --fs-4xl:         4.209rem;   /* 67px */
  --fs-5xl:         5.61rem;    /* 90px */
  --fs-hero:        7.48rem;    /* 120px — solo hero desktop */

  /* --- Pesos --- */
  --fw-light:       300;
  --fw-regular:     400;
  --fw-medium:      500;
  --fw-semi:        600;
  --fw-bold:        700;
  --fw-black:       900;

  /* --- Espaciado (base 8px) --- */
  --s-0:            0;
  --s-1:            0.25rem;   /* 4px */
  --s-2:            0.5rem;    /* 8px */
  --s-3:            0.75rem;   /* 12px */
  --s-4:            1rem;      /* 16px */
  --s-5:            1.5rem;    /* 24px */
  --s-6:            2rem;      /* 32px */
  --s-7:            3rem;      /* 48px */
  --s-8:            4rem;      /* 64px */
  --s-9:            6rem;      /* 96px */
  --s-10:           8rem;      /* 128px */
  --s-11:           12rem;     /* 192px */

  /* --- Radios (conservadores, estilo editorial) --- */
  --r-none:         0;
  --r-xs:           2px;
  --r-sm:           4px;
  --r-md:           8px;
  --r-lg:           16px;
  --r-full:         9999px;

  /* --- Sombras (sutiles, con tinte navy) --- */
  --sh-xs:          0 1px 2px rgba(15, 24, 71, 0.04);
  --sh-sm:          0 2px 4px rgba(15, 24, 71, 0.06);
  --sh-md:          0 4px 12px rgba(15, 24, 71, 0.08);
  --sh-lg:          0 12px 32px rgba(15, 24, 71, 0.12);
  --sh-xl:          0 24px 64px rgba(15, 24, 71, 0.16);

  /* --- Transiciones --- */
  --t-fast:         150ms ease-out;
  --t-med:          300ms ease-out;
  --t-slow:         600ms ease-out;
  --t-editorial:    800ms cubic-bezier(0.22, 1, 0.36, 1);

  /* --- Z-index --- */
  --z-base:         1;
  --z-sticky:       100;
  --z-dropdown:     200;
  --z-modal:        900;
  --z-floating:     800;    /* chatbot + whatsapp */
  --z-toast:        1000;

  /* --- Breakpoints (solo para referencia — las media queries los usan literalmente) --- */
  --bp-sm:          640px;
  --bp-md:          768px;
  --bp-lg:          1024px;
  --bp-xl:          1280px;
  --bp-2xl:         1536px;

  /* --- Layout --- */
  --container-max:  1280px;
  --container-pad:  var(--s-5);
}