/*
 * tokens.css — Design Tokens FLEXUS
 *
 * Uso: Referencia estas variables en todos los demás archivos CSS.
 * Las clases de utilities.css y components.css deben usar var(--*) en
 * vez de valores duros siempre que sea posible.
 *
 * Los breakpoints se documentan aquí como referencia pero NO pueden
 * usarse dentro de @media. Copiar el valor directamente en la query.
 *   xs  ≤ 575px
 *   sm  ≤ 767px
 *   md  ≤ 991px
 *   lg  ≤ 1199px
 *   xl  ≥ 1400px
 */

:root {

  /* ─────────────────────────────────────
   * Espaciado — escala base-4
   * ───────────────────────────────────── */
  --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 */

  /* ─────────────────────────────────────
   * Tipografía
   * ───────────────────────────────────── */
  --font-sans:  system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: Georgia, "Times New Roman", serif;
  --font-mono:  ui-monospace, "Cascadia Code", "Source Code Pro", monospace;

  --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:  2rem;      /* 32px */
  --text-4xl:  clamp(2rem,   4vw + 0.5rem, 3rem);     /* ~32–48px fluido */
  --text-5xl:  clamp(2.5rem, 5vw + 0.5rem, 4rem);     /* ~40–64px fluido */

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semi:   600;
  --weight-bold:   700;

  /* ─────────────────────────────────────
   * Colores
   * ───────────────────────────────────── */
  --color-bg:           #ffffff;
  --color-surface:      #f8f8f8;
  --color-surface-2:    #f0f0f0;
  --color-border:       #e0e0e0;
  --color-border-strong:#c0c0c0;

  --color-text:         #1a1a1a;
  --color-text-muted:   #666666;
  --color-text-subtle:  #999999;

  --color-accent:       #2563eb;
  --color-accent-hover: #1d4ed8;
  --color-accent-light: #eff6ff;

  /* Aliases semánticos IT */
  --color-primary:         var(--color-accent);
  --color-primary-hover:   var(--color-accent-hover);
  --color-primary-light:   var(--color-accent-light);

  --color-secondary:       #7c3aed;
  --color-secondary-hover: #6d28d9;
  --color-secondary-light: #f5f3ff;

  --color-info:            #0284c7;
  --color-info-light:      #e0f2fe;

  --color-success:  #16a34a;
  --color-success-light: #dcfce7;

  --color-warning:  #d97706;
  --color-warning-light: #fef3c7;

  --color-error:    #dc2626;
  --color-error-light:  #fee2e2;
  --color-danger:        var(--color-error);
  --color-danger-light:  var(--color-error-light);

  /* ─────────────────────────────────────
   * Paleta creativa — 8 colores × 3 tonos
   * Uso libre para invitaciones y diseño. No semánticos.
   * ───────────────────────────────────── */
  --rose-light:   #ffe4e6;  --rose:   #f43f5e;  --rose-dark:   #9f1239;
  --pink-light:   #fce7f3;  --pink:   #ec4899;  --pink-dark:   #9d174d;
  --purple-light: #f3e8ff;  --purple: #a855f7;  --purple-dark: #6b21a8;
  --blue-light:   #dbeafe;  --blue:   #3b82f6;  --blue-dark:   #1e40af;
  --teal-light:   #ccfbf1;  --teal:   #14b8a6;  --teal-dark:   #0f766e;
  --green-light:  #dcfce7;  --green:  #22c55e;  --green-dark:  #15803d;
  --amber-light:  #fef3c7;  --amber:  #f59e0b;  --amber-dark:  #92400e;
  --gray-light:   #f5f5f5;  --gray:   #737373;  --gray-dark:   #262626;

  /* ─────────────────────────────────────
   * Contenedor
   * ───────────────────────────────────── */
  --container-max:  78rem;    /* 1248px — mismo ancho que .flex-body original */
  --container-pad:  var(--space-4);

  /* ─────────────────────────────────────
   * Bordes y radios
   * ───────────────────────────────────── */
  --radius-sm:   0.25rem;  /*  4px */
  --radius-md:   0.5rem;   /*  8px */
  --radius-lg:   1rem;     /* 16px */
  --radius-xl:   1.5rem;   /* 24px */
  --radius-full: 9999px;

  /* ─────────────────────────────────────
   * Sombras
   * ───────────────────────────────────── */
  --shadow-sm:  0 1px 2px rgb(0 0 0 / 0.05);
  --shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl:  0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* ─────────────────────────────────────
   * Transiciones
   * ───────────────────────────────────── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ─────────────────────────────────────
   * Z-index
   * ───────────────────────────────────── */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
}