/* =============================================================================
   GIO PALETA DE COLORES — sistema de diseño unificado
   Importar este archivo en cualquier hoja de estilos que necesite los tokens.
   ============================================================================= */

:root {

  /* ─── Surfaces ──────────────────────────────────────────────────────────── */
  --gio-s1: #0f1a2d;
  --gio-s2: #142239;
  --gio-s3: #1b2d49;
  --gio-s4: #0b2b54;

  /* ─── Gradients ─────────────────────────────────────────────────────────── */
  --gio-page-bg:         radial-gradient(circle at top, #13233d 0, #0b1220 42%, #08101c 100%);
  --gio-gradient-blue:   linear-gradient(135deg, #1b63d9, #2d7dff);
  --gio-gradient-green:  linear-gradient(135deg, #148f36, #20d449);
  --gio-gradient-amber:  linear-gradient(135deg, #d98500, #ffb020);
  --gio-gradient-cyan:   linear-gradient(135deg, #069aaa, #00d5eb);
  --gio-gradient-purple: linear-gradient(135deg, #7c3aed, #a855f7);

  /* ─── Logo / brand ──────────────────────────────────────────────────────── */
  --gio-logo-bg: linear-gradient(135deg, #2d7dff, #00e5ff);

  /* ─── RGB ─────────────────────────────────────────────── 
  Ejemplo de uso: rgba(var(--gio-rgb-blue), .28);
  */
  --gio-rgb-blue:   45, 125, 255;
  --gio-rgb-blue-2: 29, 43, 70;
  --gio-rgb-blue-3: 17, 26, 43;
  --gio-rgb-blue-4: 10, 20, 34;
  --gio-rgb-blue-5: 15, 26, 45;
  --gio-rgb-blue-6: 20, 34, 57;
  --gio-rgb-blue-7: 151, 179, 217;
  --gio-rgb-green:  0, 230, 118;
  --gio-rgb-amber:  255, 176, 32;
  --gio-rgb-cyan:   0, 229, 255;
  --gio-rgb-purple: 168, 85, 247;
  --gio-rgb-black:  0, 0, 0;

  /* ─── Text hierarchy ────────────────────────────────────────────────────── */
  --gio-t1: #ffffff;
  --gio-t2: #d9e8ff;
  --gio-t3: #9db8d7;
  --gio-t4: #6380a3;
  --gio-t5: #062033;

  /* ─── Component backgrounds ─────────────────────────────────────────────── */
  --gio-topbar-bg:    linear-gradient(180deg, #1e3358 0%, #162844 100%);

  /* ─── Colors ───────────────────────────────────────────────────────────── */
  --gio-blue:    #2d7dff;
  --gio-blue-2:  #118FFE;
  --gio-blue-3:  #9cc5ff;
  --gio-blue-4:  #0e1e35;
  --gio-blue-5:  #0d1829;
  --gio-cyan:    #00e5ff;
  --gio-green:   #00e676;
  --gio-green-2: #1f9d55;
  --gio-green-3: #50CE20;
  --gio-green-4: #22c55e;
  --gio-green-5: #6fffb7;
  --gio-amber:   #ffb020;
  --gio-red:     #ff4568;
  --gio-purple:  #a855f7;
  --gio-yellow:  #eab308;
  --gio-teal:    #06b6d4;
  --gio-teal-2:  #0d6171;
  --gio-orange:  #f97316;
  --gio-gray:    #a3a3a3;
  --gio-navy:    #16435b;

  /* ─── Paleta heredada (styles.css legacy) ──────────────────────────────── */
  --white: #ffffff;
  --black: #000000;
  --concrete: #f2f2f2;
  --sandy-brown: #f3a054;
  --flamingo: #ec5538;
  --alizarin-crimson: #e93222;
  --orange: #ff6010;
  --silver: #bababa;
  --mercury: #e6e6e6;
  --nobel: #b3b3b3;
  --lochmara: #0077cc;
  --silver-1: #bbbbbb;
  --silver-2: #bfbfbf;
  --silver-3: #bcbcbc;
  --fire: #b33c00;
  --soapstone: #fffbfa;
  --sauvignon: #fff7f5;
  --fair-pink: #ffeeeb;
  --blaze-orange: #ff6a00;
  --emperor: #535353;
  --alto: #d3d3d3;
  --biscay: #143666;
  --azure-radiance: #0095ff;
  --navy-blue: #001177;
  --cinnamon: #804000;
  --gray: #888888;
  --mine-shaft: #333333;
  --dove-gray: #707070;
  --dove-gray-1: #666666;
  --denim: #0e7dcc;
  --alice-blue: #f4faff;
  --alabaster: #fafafa;
  --wild-sand: #f4f4f4;
  --jungle-green: #22a58d;
  --sand-dune: #806659;
  --roman: #df5950;
  --orange-54: #ff601054;
  --denim-30: #0e7dcc30;
  --denim-54: #0e7dcc54;
  --black-1c: #0000001c;
  --black-30: #00000030;
  --mine-shaft-66: #33333366;
  --white-20: #ffffff20;
  --blaze-orange-1a: #ff6a001a;
  --silver-1a: #bababa1a;
  --anakiwa-a8: #a0dbffa8;
  --spicy-mix: #805540;

}

/* ─── Utilidades de background (para colorField de tablas/dots) ───────────── */
.gio-blue-bg               { background: var(--gio-blue); }
.gio-blue-bg-2             { background: var(--gio-blue-2); }
.gio-blue-bg-3             { background: var(--gio-blue-3); }
.gio-cyan-bg               { background: var(--gio-cyan); }
.gio-green-bg              { background: var(--gio-green); }
.gio-green-bg-2            { background: var(--gio-green-2); }
.gio-green-bg-3            { background: var(--gio-green-3); }
.gio-green-bg-4            { background: var(--gio-green-4); }
.gio-green-bg-5            { background: var(--gio-green-5); }
.gio-amber-bg              { background: var(--gio-amber); }
.gio-red-bg                { background: var(--gio-red); }
.gio-purple-bg             { background: var(--gio-purple); }
.gio-yellow-bg             { background: var(--gio-yellow); }
.gio-teal-bg               { background: var(--gio-teal); }
.gio-orange-bg             { background: var(--gio-orange); }
.gio-gray-bg               { background: var(--gio-gray); }

/* ─── Utilidades de texto (para colorField de tablas) ──────────────────────── */
.gio-blue-color            { color: var(--gio-blue); }
.gio-blue-color-2          { color: var(--gio-blue-2); }
.gio-blue-color-3          { color: var(--gio-blue-3); }
.gio-cyan-color            { color: var(--gio-cyan); }
.gio-green-color           { color: var(--gio-green); }
.gio-green-color-2         { color: var(--gio-green-2); }
.gio-green-color-3         { color: var(--gio-green-3); }
.gio-green-color-4         { color: var(--gio-green-4); }
.gio-green-color-5         { color: var(--gio-green-5); }
.gio-amber-color           { color: var(--gio-amber); }
.gio-red-color             { color: var(--gio-red); }
.gio-purple-color          { color: var(--gio-purple); }
.gio-yellow-color          { color: var(--gio-yellow); }
.gio-teal-color            { color: var(--gio-teal); }
.gio-orange-color          { color: var(--gio-orange); }
.gio-gray-color            { color: var(--gio-gray); }