/* ===== Fluxio color system =====
   Brand palette from FLUXIO brandbook:
     Turquesa  #56CBC4  rgb(86,203,196)
     Blanco    #FFFFFF
     Gris/Slate#41484E  rgb(65,72,78)
     Negro     #0B100F  rgb(11,16,15)
   Scales below are extended around those anchors. */
:root {
  /* --- Teal (primary brand) --- */
  --teal-50:  #EAF9F7;
  --teal-100: #D2F2EF;
  --teal-200: #A9E6E1;
  --teal-300: #80D9D3;
  --teal-400: #56CBC4; /* BRAND primary (brandbook turquesa) */
  --teal-500: #3DB2AB;
  --teal-600: #2E938D;
  --teal-700: #247370;
  --teal-800: #1B5451;
  --teal-900: #123735;

  /* --- Neutral / slate (cool, tuned to #41484E) --- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F6F7F8;
  --neutral-100: #ECEEF0;
  --neutral-200: #DADEE1;
  --neutral-300: #BEC4C9;
  --neutral-400: #98A1A7;
  --neutral-500: #6F787E;
  --neutral-600: #545C62;
  --neutral-700: #41484E; /* BRAND slate (brandbook gris profundo) */
  --neutral-800: #2B3136;
  --neutral-900: #181D20;
  --black:       #0B100F; /* BRAND negro */

  /* --- Semantic status --- */
  --green-100: #DCF3E7; --green-500: #34B37E; --green-600: #279266;
  --amber-100: #FCEED2; --amber-500: #F0A21F; --amber-600: #C9840F;
  --red-100:   #FBE0DB; --red-500:   #E5533C; --red-600:   #C43D28;
  --blue-100:  #DDEBF8; --blue-500:  #3E8FD4; --blue-600:  #2A72B2;

  /* ===== Semantic aliases ===== */
  --color-brand:         var(--teal-400);
  --color-brand-hover:   var(--teal-500);
  --color-brand-active:  var(--teal-600);
  --color-brand-subtle:  var(--teal-50);
  --color-brand-border:  var(--teal-200);
  --color-ink:           var(--black);

  --text-primary:   var(--neutral-800);
  --text-secondary: var(--neutral-600);
  --text-muted:     var(--neutral-500);
  --text-inverse:   var(--neutral-0);
  --text-on-brand:  var(--black);   /* dark ink reads on light teal; brand uses white for large display only */
  --text-link:      var(--teal-600);
  --text-link-hover:var(--teal-700);

  --surface-page:    var(--neutral-0);
  --surface-subtle:  var(--neutral-50);
  --surface-muted:   var(--neutral-100);
  --surface-card:    var(--neutral-0);
  --surface-inverse: var(--neutral-800);
  --surface-brand:   var(--teal-400);

  --border-subtle:  var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --focus-ring:     var(--teal-400);

  /* status */
  --status-success: var(--green-500);
  --status-warning: var(--amber-500);
  --status-danger:  var(--red-500);
  --status-info:    var(--blue-500);

  /* EV charging domain states */
  --charge-available: var(--green-500);
  --charge-charging:  var(--teal-400);
  --charge-occupied:  var(--amber-500);
  --charge-fault:     var(--red-500);
  --charge-offline:   var(--neutral-400);
}

/* Dark surface scope — matches brandbook's slate/black backgrounds */
.fx-dark {
  --surface-page:    var(--neutral-900);
  --surface-subtle:  var(--neutral-800);
  --surface-muted:   var(--neutral-700);
  --surface-card:    var(--neutral-800);
  --surface-inverse: var(--neutral-0);
  --text-primary:    var(--neutral-0);
  --text-secondary:  var(--neutral-300);
  --text-muted:      var(--neutral-400);
  --border-subtle:   rgba(255,255,255,.08);
  --border-default:  rgba(255,255,255,.14);
  --border-strong:   rgba(255,255,255,.24);
  --text-link:       var(--teal-300);
  --text-link-hover: var(--teal-200);
}