/* ============================================================
   AZIST — DESIGN TOKENS
   Fuente de verdad para colores, tipografía y espaciado.
   ============================================================ */
:root {

  /* COLORES ------------------------------------------------- */
  --color-black:        #000000;
  --color-near-black:   #1d1d1b;
  --color-grey:         #3A3A3A;
  --color-mid-grey:     #888888;
  --color-light-grey:   #E6E6E6;
  --color-off-white:    #F5F5F3;
  --color-white:        #FFFFFF;

  --color-blue:         #4164FE;
  --color-orange:       #E94B24;
  --color-sky-blue:     #7DC4FF;
  --color-light-purple: #CEA6FC;
  --color-lilac:        #9B8AFE;

  /* Semantic aliases */
  --color-accent-blue:   #4164FE;
  --color-accent-orange: #E94B24;
  --color-ink:           #1d1d1b;
  --color-teaser:        #888888;

  /* Gradientes */
  --gradient-brand:     linear-gradient(90deg, #4164FE, #E94B24);
  --gradient-brand-soft: linear-gradient(90deg, #4164FE, #7DC4FF);
  --gradient-blue:      linear-gradient(135deg, #7DC4FF 0%, #4164FE 100%);
  --gradient-colorful:  linear-gradient(135deg, #4164FE 0%, #CEA6FC 50%, #E94B24 100%);
  --gradient-dark:      linear-gradient(135deg, #000000 0%, #4164FE 100%);
  --gradient-clear:     linear-gradient(135deg, #FFFFFF 0%, #7DC4FF 100%);

  /* TIPOGRAFÍA --------------------------------------------- */
  /* Display: Urbanist (reemplaza a PPFrama). Variables conservan
     el nombre --font-frama para no romper referencias existentes. */
  --font-frama:    'Urbanist', sans-serif;
  --font-frama-t:  'Urbanist', sans-serif;
  --font-manrope:  'Manrope', sans-serif;
  --font-eiko:     'PPEiko', serif;

  /* Escala tipográfica fluida */
  --text-xs:    clamp(11px, 1.1vw, 13px);
  --text-sm:    clamp(13px, 1.3vw, 14px);
  --text-base:  clamp(15px, 1.5vw, 17px);
  --text-md:    clamp(17px, 1.8vw, 20px);
  --text-lg:    clamp(20px, 2.2vw, 24px);
  --text-xl:    clamp(24px, 2.8vw, 32px);
  --text-2xl:   clamp(32px, 3.5vw, 44px);
  --text-3xl:   clamp(44px, 5vw, 64px);
  --text-4xl:   clamp(56px, 7vw, 96px);
  --text-5xl:   clamp(72px, 9vw, 128px);
  --text-ghost: clamp(100px, 14vw, 200px);

  /* Blog reading-level scale */
  --fs-kicker:   clamp(10px, 1vw, 12px);
  --fs-title-lg: clamp(32px, 4.5vw, 56px);
  --fs-title-sm: clamp(22px, 2.4vw, 32px);
  --fs-teaser:   clamp(14px, 1.4vw, 16px);
  --fs-meta:     clamp(10px, 1vw, 11px);

  /* ESPACIADO ---------------------------------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-40: 160px;

  /* LAYOUT ------------------------------------------------- */
  --max-width:    1280px;
  --gutter:       clamp(24px, 5vw, 80px);
  --nav-height:   72px;

  /* BORDES / RADIO ----------------------------------------- */
  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;
  --radius-pill: 100px;

  /* SOMBRAS ------------------------------------------------ */
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:  0 8px 32px rgba(0,0,0,0.10);
  --shadow-lg:  0 24px 64px rgba(0,0,0,0.14);

  /* TRANSICIONES ------------------------------------------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   180ms;
  --duration-base:   320ms;
  --duration-slow:   560ms;
}