/* FUTURA Design System — Color Tokens
 * Brand palette extracted from official logo assets.
 * Two hexagonal logomark shapes: left = teal (#00B5CC), right = blue (#1E52C0).
 * Wordmark "FUTURA" = deep navy (#1B3080). Tagline gray = #7A7A7A.
 */
:root {

  /* ─── BRAND PRIMITIVES ──────────────────────────────────────── */
  --futura-navy-900: #0A1640;
  --futura-navy-800: #1B3080;   /* FUTURA wordmark — primary dark blue */
  --futura-navy-700: #1A3A9A;
  --futura-navy-600: #1E52C0;   /* Right logomark hexagon */
  --futura-navy-500: #3B72D8;
  --futura-navy-400: #6090E4;
  --futura-navy-200: #C5D5F5;
  --futura-navy-100: #EEF2FF;
  --futura-navy-50:  #F5F7FF;

  --futura-teal-900: #005A70;
  --futura-teal-800: #007890;
  --futura-teal-700: #0098B0;
  --futura-teal-600: #00B5CC;   /* Left logomark hexagon — brand teal */
  --futura-teal-500: #26C4D8;
  --futura-teal-400: #5DD8E8;
  --futura-teal-200: #B3EDF5;
  --futura-teal-100: #E3F7FB;
  --futura-teal-50:  #F0FBFD;

  --futura-gray-900: #111827;
  --futura-gray-800: #1F2937;
  --futura-gray-700: #374151;
  --futura-gray-600: #4B5563;
  --futura-gray-500: #7A7A7A;   /* "ANALÍTICA AVANZADA" tagline gray */
  --futura-gray-400: #9CA3AF;
  --futura-gray-300: #D1D5DB;
  --futura-gray-200: #E5E7EB;
  --futura-gray-100: #F5F6FA;
  --futura-gray-50:  #FAFBFE;

  /* ─── INTERACTIVE ───────────────────────────────────────────── */
  --color-primary:          var(--futura-navy-600);    /* #1E52C0 — main CTA */
  --color-primary-dark:     var(--futura-navy-700);    /* #1A3A9A — hover/active */
  --color-primary-light:    var(--futura-navy-500);    /* #3B72D8 */
  --color-primary-on-dark:  #5B9FFF;                   /* on dark tile surfaces */
  --color-primary-surface:  var(--futura-navy-100);    /* #EEF2FF — tinted bg */

  --color-accent:           var(--futura-teal-600);    /* #00B5CC — teal CTA */
  --color-accent-dark:      var(--futura-teal-700);    /* #0098B0 — hover/active */
  --color-accent-light:     var(--futura-teal-500);    /* #26C4D8 */
  --color-accent-surface:   var(--futura-teal-100);    /* #E3F7FB — tinted bg */

  /* ─── HEADING ───────────────────────────────────────────────── */
  --color-heading:          var(--futura-navy-800);    /* #1B3080 — all headlines */

  /* ─── SURFACES ──────────────────────────────────────────────── */
  --color-canvas:           #FFFFFF;
  --color-canvas-parchment: var(--futura-gray-100);    /* #F5F6FA — off-white */
  --color-surface-pearl:    var(--futura-gray-50);     /* #FAFBFE — near-white */
  --color-surface-dark-1:   #0F1E52;                   /* primary dark navy tile */
  --color-surface-dark-2:   #0B1845;                   /* slightly deeper */
  --color-surface-dark-3:   #08123A;                   /* darkest tile */
  --color-surface-black:    #060E2A;                   /* near-black / hero */
  --color-surface-chip:     #D8DEF0;                   /* translucent chip gray */

  /* ─── TEXT ──────────────────────────────────────────────────── */
  --color-ink:              var(--futura-gray-900);    /* #111827 — default text */
  --color-ink-muted-80:     var(--futura-gray-700);    /* #374151 */
  --color-ink-muted-48:     var(--futura-gray-500);    /* #7A7A7A */
  --color-ink-disabled:     var(--futura-gray-400);    /* #9CA3AF */
  --color-body:             var(--futura-gray-900);
  --color-body-on-dark:     #FFFFFF;
  --color-body-muted:       #B8C4E0;                   /* secondary copy on dark */
  --color-on-primary:       #FFFFFF;
  --color-on-dark:          #FFFFFF;
  --color-on-accent:        #FFFFFF;

  /* ─── BORDERS ───────────────────────────────────────────────── */
  --color-hairline:         var(--futura-gray-200);    /* #E5E7EB */
  --color-divider-soft:     var(--futura-gray-100);    /* #F5F6FA */
  --color-border-muted:     rgba(0, 0, 0, 0.08);

  /* ─── SEMANTIC STATUS ───────────────────────────────────────── */
  --color-success:          #059669;
  --color-success-surface:  #ECFDF5;
  --color-success-text:     #065F46;
  --color-warning:          #D97706;
  --color-warning-surface:  #FFFBEB;
  --color-warning-text:     #92400E;
  --color-error:            #DC2626;
  --color-error-surface:    #FEF2F2;
  --color-error-text:       #991B1B;
  --color-info:             var(--futura-navy-600);
  --color-info-surface:     var(--futura-navy-100);
  --color-info-text:        var(--futura-navy-800);

  /* ─── GRADIENTS ─────────────────────────────────────────────── */
  --gradient-brand:          linear-gradient(135deg, #00B5CC 0%, #1E52C0 55%, #1B3080 100%); /* @kind color */
  --gradient-brand-h:        linear-gradient(90deg,  #00B5CC 0%, #1E52C0 55%, #1B3080 100%); /* @kind color */
  --gradient-brand-subtle:   linear-gradient(135deg, #E3F7FB 0%, #EEF2FF 100%); /* @kind color */
  --gradient-hero:           linear-gradient(160deg, #0F1E52 0%, #1B3080 55%, #0B1845 100%); /* @kind color */
  --gradient-teal-blue:      linear-gradient(90deg, #00B5CC, #1E52C0); /* @kind color */
}