/* ═══════════════════════════════════════════════════════════
   Nimboo Cloud — Design Tokens
   Paleta oficial de Cloud: azul de marca #9AC5D6.
   Aprobada en Process/preview-todos-roles.html, que es el
   diseno de referencia de las seis vistas por rol.
   Adobe Fonts kit: https://use.typekit.net/yde8rve.css

   NOTA: Cloud NO comparte identidad visual con RSS. RSS se
   queda con la paleta papel; Cloud usa este azul.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ─── Azul de marca Nimboo Cloud ──────────────────────────
     El azul es #9AC5D6, elegido por Adriano el 7 agosto 2026.
     Es el color de TODO lo que se pinta de azul: logotipo,
     botones, fondos, bordes, iconos y acentos graficos.
     Matiz 194 en HSL. Toda la escala sale de ese matiz.

     UN SOLO AZUL: --cloud, --cloud-deep y --cloud-deeper valen
     lo mismo a proposito. Los textos de acento, los botones, el
     logotipo y los bordes son literalmente #9AC5D6. No inventes
     versiones mas oscuras para "que se lea mejor".

     Lo que va ENCIMA del azul es BLANCO, con --on-cloud. Asi lo
     decidio Adriano el 9 agosto 2026: el texto oscuro contrasta
     mas, pero azul con negro se ve agresivo y no es la marca.

     --cloud-ink se queda solo como fondo oscuro de la familia del
     azul, para chips y numeros marcados. Ya no es color de texto.

     El SVG del logotipo llego exportado en #94B2BC. Los archivos
     de uso en assets/img se repintaron a #9AC5D6. El original
     tal como lo entrego Adriano vive en logo-original.svg. */
  --cloud:        #9AC5D6;   /* el azul, tal cual */
  --cloud-deep:   #9AC5D6;   /* mismo azul: textos de acento */
  --cloud-deeper: #9AC5D6;   /* mismo azul: no se oscurece */
  --cloud-hover:  #7AB5CD;   /* solo para el hover de botones */
  --cloud-light:  #BCDAE6;
  --cloud-soft:   #D3E6EE;
  --cloud-pale:   #E5F1F6;
  --cloud-mist:   #F2F8FB;   /* fondo de inputs y hovers */
  --cloud-ink:    #0F323D;   /* fondo oscuro de la familia del azul */
  --on-cloud:     #ffffff;   /* texto que va ENCIMA del azul */

  /* ─── Neutros ─────────────────────────────────────────── */
  --white:      #ffffff;
  /* Fondo de la app. Va con un sesgo azul, de la familia de la
     marca, y lo bastante separado del blanco para que las
     tarjetas se despeguen: con #fafbfc habia dos por ciento de
     diferencia y todo se fundia con el fondo. */
  --paper:      #eef2f6;
  --paper-pure: #ffffff;     /* superficies sobre el fondo */
  --black:      #0f1419;

  /* Escala de tinta (texto y bordes) */
  --ink:    #1f2937;
  --ink-80: #374151;
  --ink-60: #6b7280;
  --ink-40: #9ca3af;
  --ink-20: #d1d5db;
  --ink-10: #e5e7eb;

  --line:      #eef2f5;      /* divisores */
  --line-soft: #f4f7f9;

  /* ─── Semanticos ──────────────────────────────────────── */
  --green:      #059669;     /* exito, pagado, a tiempo */
  --green-soft: #d1fae5;
  --green-pale: #ecfdf5;
  --red:        #dc2626;     /* error, destructivo, retraso */
  --red-soft:   #fecaca;
  --red-pale:   #fef2f2;
  --amber:      #d97706;     /* advertencia, por vencer */
  --amber-soft: #fde68a;
  --amber-pale: #fffbeb;
  --gold:       #d4a84a;     /* Early Bird, premium */
  --gold-pale:  #fdf6e3;
  --purple:     #5b3a8a;     /* cupones */
  --purple-soft:#c5b3dd;

  /* ─── Tipografia ──────────────────────────────────────── */

  /* UI / funcional: botones, numeros, labels, body de UI.
     Es la tipografia de toda la plataforma. */
  --display: 'Archivo', -apple-system, system-ui, sans-serif;

  /* PROHIBIDO EL ITALIC en cualquier texto de Cloud, decision de
     Adriano del 7 agosto 2026. Por eso no hay token de serif
     italic: las palabras destacadas se resuelven con color
     (--cloud-deep) y peso, nunca inclinando la letra. */

  /* Titulares grandes decorativos */
  --display-headline: 'athena', 'Archivo', system-ui, sans-serif;

  /* Body de lectura larga */
  --body-text: 'area-normal', 'Archivo', system-ui, sans-serif;

  /* Mono (debug, IDs) */
  --mono: 'SF Mono', 'Monaco', 'Menlo', 'Consolas', monospace;

  /* ─── Pesos ───────────────────────────────────────────── */
  --w-light: 300;
  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 600;
  --w-bold: 700;

  /* ─── Tamanos tipograficos ────────────────────────────── */
  /* IMPORTANTE: --t-* es SOLO tamano de letra.
     Las duraciones viven en --d-* mas abajo. Tenerlas con el
     mismo prefijo rompia el tamano de letra del body. */
  --t-xs: 0.6875rem;    /* 11px */
  --t-sm: 0.8125rem;    /* 13px */
  --t-base: 0.9375rem;  /* 15px — body UI */
  --t-md: 1rem;         /* 16px — body lectura */
  --t-lg: 1.25rem;      /* 20px */
  --t-xl: 1.5rem;       /* 24px */
  --t-2xl: 2rem;        /* 32px */
  --t-3xl: 2.75rem;     /* 44px */
  --t-4xl: 4rem;        /* 64px */

  /* ─── Line heights ────────────────────────────────────── */
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* ─── Letter spacing ──────────────────────────────────── */
  --ls-tight: -0.035em;
  --ls-normal: 0;
  --ls-wide: 0.14em;
  --ls-wider: 0.18em;
  --ls-widest: 0.28em;

  /* ─── Sombras ─────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(15, 20, 25, 0.03);
  --shadow-sm: 0 2px 8px rgba(15, 20, 25, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 20, 25, 0.06);
  --shadow-lg: 0 16px 48px rgba(15, 20, 25, 0.08);
  --shadow-cloud: 0 20px 60px -10px rgba(154, 197, 214, 0.55);

  /* ─── Radios ──────────────────────────────────────────── */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ─── Espaciado ───────────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* ─── Layout ──────────────────────────────────────────── */
  --sidebar-w: 256px;
  --container-narrow: 460px;
  --container-md: 880px;
  --container-lg: 1240px;
  --container-xl: 1440px;

  /* ─── Movimiento ──────────────────────────────────────── */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --d-fast: 180ms var(--ease);
  --d-base: 280ms var(--ease);
  --d-slow: 480ms var(--ease);
  --d-slower: 700ms var(--ease);

  /* ─── Z-index ─────────────────────────────────────────── */
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-drawer: 700;
  --z-modal-bg: 800;
  --z-modal: 900;
  --z-toast: 1000;
}