/* ============================================================
   RAM Technologies — Color Tokens
   Base palette is sourced directly from the official brand
   color sheet (Paleta-colores-RAM). Tints/shades and semantic
   aliases are derived to support a full UI system.
   ============================================================ */

:root {
  /* ---- Brand core (from official palette) ---- */
  --ram-royal:        #1F299C; /* Primary brand blue */
  --ram-navy:         #16205B; /* Deep navy — dark surfaces, ink */
  --ram-slate:        #767BA8; /* Muted slate — secondary text */
  --ram-pale:         #E1EAF9; /* Pale blue — tinted surfaces */
  --ram-cyan:         #30D1FF; /* Electric cyan — highlight */
  --ram-azure:        #0372FF; /* Bright azure blue — action */
  --ram-periwinkle:   #A3A9F5; /* Soft periwinkle — accent */
  --ram-orange:       #F15928; /* Signal orange — single accent */

  /* ---- Royal blue ramp ---- */
  --royal-50:  #eef0fb;
  --royal-100: #d9dcf3;
  --royal-200: #b3b9e8;
  --royal-300: #8088d6;
  --royal-400: #4f59bf;
  --royal-500: #1F299C; /* base */
  --royal-600: #1a237f;
  --royal-700: #161d66;
  --royal-800: #12184f;
  --royal-900: #0d113a;

  /* ---- Azure (action) ramp ---- */
  --azure-50:  #e6f1ff;
  --azure-100: #c2dcff;
  --azure-200: #84b8ff;
  --azure-300: #4795ff;
  --azure-400: #1a80ff;
  --azure-500: #0372FF; /* base */
  --azure-600: #025fd6;
  --azure-700: #024aa8;
  --azure-800: #01387f;
  --azure-900: #012757;

  /* ---- Cyan ramp ---- */
  --cyan-50:  #e8faff;
  --cyan-100: #c2f1ff;
  --cyan-200: #8ae6ff;
  --cyan-300: #30D1FF; /* base */
  --cyan-400: #16b8e8;
  --cyan-500: #0f9bc6;

  /* ---- Neutral / ink ramp (cool, navy-tinted greys) ---- */
  --neutral-0:   #ffffff;
  --neutral-50:  #f6f8fd;
  --neutral-100: #eef1f8;
  --neutral-200: #dfe4f0;
  --neutral-300: #c6cde0;
  --neutral-400: #9aa3c2;
  --neutral-500: #767BA8; /* slate base */
  --neutral-600: #565d86;
  --neutral-700: #3d4368;
  --neutral-800: #262c4d;
  --neutral-900: #16205B; /* navy */
  --neutral-950: #0d1238;

  /* ---- Signal / status ---- */
  --signal-orange: #F15928;
  --success-500:   #1f9d6b;
  --success-100:   #d6f3e6;
  --warning-500:   #e8a008;
  --warning-100:   #fbeecb;
  --danger-500:    #e23b3b;
  --danger-100:    #fbdada;
  --info-500:      #0372FF;
  --info-100:      #c2dcff;

  /* ---- Brand gradients ---- */
  --gradient-brand:  linear-gradient(120deg, #30D1FF 0%, #4f8efc 45%, #8b6ff2 100%); /* @kind color */
  --gradient-royal:  linear-gradient(135deg, #1F299C 0%, #0372FF 100%); /* @kind color */
  --gradient-navy:   linear-gradient(160deg, #1c2a8a 0%, #16205B 55%, #111a4a 100%); /* @kind color */
  --gradient-cyan:   linear-gradient(120deg, #30D1FF 0%, #0372FF 100%); /* @kind color */

  /* ============================================================
     Semantic aliases — light theme (default)
     ============================================================ */
  --bg-base:        var(--neutral-0);
  --bg-subtle:      var(--neutral-50);
  --bg-muted:       var(--neutral-100);
  --bg-tint:        var(--ram-pale);
  --bg-inverse:     var(--ram-navy);

  --surface-card:   var(--neutral-0);
  --surface-raised: var(--neutral-0);
  --surface-sunken: var(--neutral-50);

  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-brand:   var(--royal-500);

  --text-strong:    var(--ram-navy);
  --text-body:      #2a3158;
  --text-muted:     var(--neutral-500);
  --text-subtle:    var(--neutral-400);
  --text-inverse:   var(--neutral-0);
  --text-brand:     var(--royal-500);
  --text-link:      var(--azure-500);

  --action-primary:        var(--royal-500);
  --action-primary-hover:  var(--royal-600);
  --action-primary-press:  var(--royal-700);
  --action-accent:         var(--azure-500);
  --action-accent-hover:   var(--azure-600);
  --action-accent-press:   var(--azure-700);

  --focus-ring:     var(--azure-400);
}

/* ============================================================
   Dark theme scope — navy foundation
   ============================================================ */
[data-theme="dark"] {
  --bg-base:        var(--neutral-950);
  --bg-subtle:      var(--ram-navy);
  --bg-muted:       #1c2454;
  --bg-tint:        #1a2356;
  --bg-inverse:     var(--neutral-0);

  --surface-card:   #1a2356;
  --surface-raised: #20296a;
  --surface-sunken: #131a45;

  --border-subtle:  #2a3470;
  --border-default: #36418a;
  --border-strong:  #4a55a8;
  --border-brand:   var(--cyan-300);

  --text-strong:    var(--neutral-0);
  --text-body:      #d4daf0;
  --text-muted:     var(--periwinkle, #A3A9F5);
  --text-subtle:    #7d86b8;
  --text-inverse:   var(--ram-navy);
  --text-brand:     var(--cyan-300);
  --text-link:      var(--cyan-300);

  --action-primary:        var(--azure-500);
  --action-primary-hover:  var(--azure-400);
  --action-primary-press:  var(--azure-300);
  --action-accent:         var(--cyan-300);
  --action-accent-hover:   var(--cyan-200);
  --action-accent-press:   var(--cyan-100);

  --focus-ring:     var(--cyan-300);
}